首先全局状态有几部分组成
1、store--全局状态容器,整个应用的数据存储中心
2、action--view 层与data层的过渡
3、reducer--接收action并更新Store，所有的函数处理处理都在reducer里面执行，reducer返回新的state，更新界面
一个redux的更新流程就是这样的，说的不对请大家指正！！
按照上面的流程来配置项目
1、首先下载插件
yarn add redux react-redux
2、项目下面创建store文件夹里面分别新建 index.js、action.js、actionType.js、reducer.js
index.js代码
/*combineReducers 合并多个store，便于管理
*applyMiddleware
*createStore创建store
*/
import {createStore,combineReducers,applyMiddleware} from 'redux'
import immutable from 'redux-immutable-state-invariant'
//安装redux-devtools-extension的可视化工具
import { composeWithDevTools } from 'redux-devtools-extension'
//引入异步中间件
import thunkMiddleware from 'redux-thunk'
import index from './reducer';
const reducer = combineReducers({
home:index
})
const middlewares = [thunkMiddleware];
if (process.env.NODE_ENV !== 'production') {
middlewares.push(immutable())
}
const storeEnhancers = process.env.NODE_ENV !== 'production' ?
composeWithDevTools(
applyMiddleware(...middlewares),
) :
applyMiddleware(...middlewares);
const store = createStore(reducer,{},storeEnhancers)
export default store;
actionType.js
export const SAVEUSERINFO = 'SAVEUSERINFO';
action.js
import {SAVEUSERINFO} from './actionTypes'
export const saveUserInfo = (value) => ({
type: SAVEUSERINFO,
value: value
});
reducer.js
const defaultState = {
userInfo: {token: ''}
}
//reducer 可以接受state但是不可以修改state 只有store才能改变
//纯函数指得是，制定固定的输入，就一定会有固定的输出，而且不会有任何副作用
export default (state = defaultState, action) => {
switch (action.type) {
case "SAVEUSERINFO":
return {
...state,userInfo:action.value
}
default:
break
}
return state
}
