5 Redux状态管理

Redux: -> 独立的库，非React项目也可使用；//Vuex必须在Vue项目中使用

1、npm install redux --save-dev;//同时Chrome下载React、Redux调试工具(翻墙)

store/index.js store/reducer.js 组件

补充：调试工具的使用

概述图：

- - - >>> 优化actionType、action、reducer、组件内getState();dispatch();

2、actionTypes; actionCreator; combineReducers; react-redux//代码管理维护

(1).actionTypes;//便于维护

 (2).actionCreators;//action进行优化 -> 接口暴露以函数的形式，因为外面需传入参数

(3).combineReducers();//合并reducer, -> 使用其 -> 组件中获取数据：store.getState().xxx.xxx;

(4). react-redux;//其是一个连接react与redux的库

[1].npm install react-redux --save-dev;//主要利用库中的<Provider>组件，connect();

最终版：export default connect(mapStateToProps, actions)(TodoList);//只需写mapStateToProps获取state，dispatch系统通过actions自动解决了，然后通过this.props.inpVal; this.props.changeVal();