04、react配置redux全局状态

首先全局状态有几部分组成
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
}