Redux

作者: 喂喂喂章鱼 | 来源:发表于2018-06-25 16:36 被阅读0次

    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
    }
    

    相关文章

      网友评论

          本文标题:Redux

          本文链接:https://www.haomeiwen.com/subject/iykqyftx.html