核心概念

Redux规定,将模型的更新逻辑全部集中与一个特定的层(reducer),不允许程序直接修改数据,而是使用action来描述state的变化。
reducer的作用是把action和state串起来,它只是一个接收state和action,并返回新的state的函数。
  • 单一数据源
    • 整个应用的state被储存在一棵object tree中,并且这个object tree只存在于唯一一个store中。
  • State是只读的
    • 唯一改变state的方法是就是触发action,action是一个用于描述已发生事件的普通对象。
  • 使用纯函数来执行修改
    • 为了描述action如何改变state tree,你需要编写reducers。

Action

Action本质是一个描述“发生了什么”的普通JavaScript对象,它是把数据从应用传到store的有效载荷。它是store数据的唯一来源。一般来说你会通过store.dispatch()将action传道store。
const ADD_TODO = 'ADD_TODO'; { type: ADD_TODO, text: 'Build my first Redux app' }
一般约定,action内必须使用一个字符串类型的type字段来表示将要执行的动作。

Reducer

Reducer指定了应用状态的变化如何响应actions并发送到store的。Reducer就是一个纯函数,接收旧的state和action,返回新的state。
(previousState, action) => newState;
只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。

Store

Store的职责:
  • 维持应用的state;
  • 提供 getState() 方法获取 state;
  • 提供 dispatch(action) 方法更新 state;
  • 通过 subscribe(listener) 注册监听器;
  • 通过 subscribe(listener) 返回的函数注销监听器。

数据流

严格的单向数据流是Redux架构的设计核心。
  1. 调用store.dispatch(action);
  1. Redux store调用传入的reducer函数;
  1. 根reducer应该把多个子reducer输出合并成一个单一的state树;
  1. Redux store保存了根reducer返回的完整state树。
badge