0.1.1 • Published 4 years ago
react-demo-todos v0.1.1
react 调试工具:https://blog.csdn.net/one_girl/article/details/80916232 阮一峰 react-redux:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
react-redux 工作原理
- view 通过 Store.dispatch()发出 Action,Action 描述当前发生的事情,接受对象作为参数并将它发送给 Store;
- Store 收到 Action 后,会自动调用 Reducer,Reducer 接受两个参数: State 和 Action,更新后返回新的 State;
- Store 会调用监听函数 Store.subscribe(listener),一旦 State 发生变化,就会重新渲染 view;
Store
Store 就是把它们联系到一起的对象。Store 有以下职责:
- 维持应用的 state;
- 提供 getState() 方法获取 state;
- 提供 dispatch(action) 方法更新 state;
- 通过 subscribe(listener) 注册监听器;
- 通过 subscribe(listener) 返回的函数注销监听器。
mapStateToprops 和 mapDispatchToProps
connect() 用于包装 UI 组件生成容器组件
import { connect } from 'react-redux' connect( mapStateToprops, mapDispatchToProps)(Counter)
mapStateToprops() 将外部的数据(即 state 对象)转换为 UI 组件的标签属性
const mapStateToprops = function(state) { return { value: state }; };
mapDispatchToProps() 将分发 action 的函数转换为 UI 组件的标签属性 简洁语法可以直接指定为 actions 对象或包含多个 action 方法的对象