Action
action
Action 是把数据从应用(译者注:这里之所以不叫 view 是因为这些数据有可能是服务器响应,用户输入或其它非 view 的数据 )传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch()
将 action 传到 store。
Action 创建函数
- 生成action的函数
Action 创建函数也可以是异步非纯函数。
Reducer
- Reducers 指定了应用状态的变化如何响应 并发送到 store
- actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state
设计State的结构
处理Reducer的建议:开发复杂的应用时,不可避免会有一些数据相互引用。建议你尽可能地把 state 范式化,不存在嵌套。把所有数据放到一个对象里,每个数据以 ID 为主键,不同实体或列表间通过 ID 相互引用数据。把应用的 state 想像成数据库。
action 处理
1.reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。
(纯函数:对于一个输入,输出总是一样的。它不应做有副作用的操作,如 API 调用或路由跳转。这些应该在 dispatch action 前发生。)
(previousState, action) => newState
- 现在只需要谨记 reducer 一定要保持纯净。只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。
Store
- Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时,应该使用 reducer 组合而不是创建多个 store。
store的职责
- 维持应用的 state;
- 提供
getState()
方法获取 state; - 提供
dispatch(action)
方法更新 state; - 通过
subscribe(listener)
注册监听器; - 通过
unsubscribe(listener)
返回的函数注销监听器。
数据流
严格的单向数据流是 Redux 架构的设计核心
TodoList实现
验证数组元素的格式的操作
TodoList.propTypes = {
todos: PropTypes.arrayOf(
PropTypes.shape({ //拥有以下特征
id: PropTypes.number.isRequired,
completed: PropTypes.bool.isRequired,
text: PropTypes.string.isRequired
}).isRequired
).isRequired,
onTodoClick: PropTypes.func.isRequired
}
网友评论