Redux

Action

action

Action 是把数据从应用(译者注:这里之所以不叫 view 是因为这些数据有可能是服务器响应,用户输入或其它非 view 的数据 )传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

Action 创建函数

  1. 生成action的函数
    Action 创建函数也可以是异步非纯函数。

Reducer

  1. Reducers 指定了应用状态的变化如何响应 并发送到 store
  2. actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state

设计State的结构

处理Reducer的建议:开发复杂的应用时,不可避免会有一些数据相互引用。建议你尽可能地把 state 范式化,不存在嵌套。把所有数据放到一个对象里,每个数据以 ID 为主键,不同实体或列表间通过 ID 相互引用数据。把应用的 state 想像成数据库。

action 处理

1.reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。
(纯函数:对于一个输入,输出总是一样的。它不应做有副作用的操作,如 API 调用或路由跳转。这些应该在 dispatch action 前发生。)

(previousState, action) => newState

  1. 现在只需要谨记 reducer 一定要保持纯净。只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。

Store

  1. Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时,应该使用 reducer 组合而不是创建多个 store。

store的职责

数据流

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

相关阅读更多精彩内容

  • 学习必备要点: 首先弄明白,Redux在使用React开发应用时,起到什么作用——状态集中管理 弄清楚Redux是...
    贺贺v5阅读 12,906评论 10 58
  • 使用redux+react已有一段时间,刚开始使用并未深入了解其源码,最近静下心细读源码,感触颇深~ 本文主要包含...
    字节跳动技术团队阅读 5,536评论 0 5
  • 一、什么情况需要redux? 1、用户的使用方式复杂 2、不同身份的用户有不同的使用方式(比如普通用户和管...
    初晨的笔记阅读 6,263评论 0 11
  • http://gaearon.github.io/redux/index.html ,文档在 http://rac...
    jacobbubu阅读 80,360评论 35 198
  • 前言 本文 有配套视频,可以酌情观看。 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我讨论。 文中所有内...
    珍此良辰阅读 14,129评论 23 111

友情链接更多精彩内容