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();

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容