6.redux状态管理

第一步: 创建仓库       vuex  =====  redux

1, 下载安装 redux 模块 和 react-redux模块
    cnpm install redux --save
    cnpm install react-redux --save

2,创建数据仓库文件 src/store/index.js 从redux导入创建函数creatStore, 合并函数combineReducers
    import { createStore, combineReducers } from "redux";

3, 定义reducer函数
    function countReducer(state = 0, action){
            switch (action.type) {
                   case "ADD":
                   return state + action.number
                    default:
                   return state 
            }
    }
4, 把多个reducer函数合并成一个
    var reducers = combineReducers({
            count: countReducer,
    })
5, 创建并导出数据仓库
    export default createStore(reducers)

第二步: 读取仓库数据

1, 在入口文件index.js中导入状态仓库store和状态更新供应组件Provider 
    import { Provider } from "react-redux";
    import store from "./store/index";

2, 在入口文件index.js中,使用Provider 包裹App根组件, 并设置store
    <Provider store={store}>
                  <App />
      </Provider>

3, 在使用状态管理的组件中导入状态仓库联合函数connect (高阶组件)
    import { connect } from "react-redux";

4, 在导出组件之前,创建状态数据映射函数映射状态数据
    function mapState(store){
                return {
                name: store.name,
                }
    }

5, 在导出组件之前, 使用联合函数connect把仓库中的状态数据拼接到组件的props中
    MyCom= connect(mapState)(MyCom)

6, 在组件中通过this.props调用状态仓库中的数据
    {this.props.name}

第三步: 更新仓库数据

1, connect高阶组件会向当前组件props中传入dispatch函数,用于状态数据的更新, 参数对应reducer函数的第二个参数action
在需要更新的位置, 更新仓库中的数据
    this.props.dispatch({
                   type: "CHANGE",
                    value: this.refs.input.value
            })

附加: 监听仓库中数据的更新
2, 在需要监听更新的组件中导入状态仓库
    import store from "../../store/index"
    store.subscribe(()=>{
                    console.log("数据已更新")
            })
    
注1:  store.subscribe() 添加监听后会返回一个函数, 调用返回的函数可以结束监听

注2: 如果报hooks的错,请降低react-redux版本为5.0重试