Redux说明

发表于

三个基本原则

  • 整个应用只有唯一一个可信数据源，也就是只有一个 Store
  • State 只能通过触发 Action 来更改
  • State 的更改必须写成纯函数，也就是每次更改总是返回一个新的 State，在 Redux 里这种函数称为 Reducer

Actions

Action 很简单，就是一个单纯的包含 { type, payload } 的对象，type 是一个常量用来标示动作类型，payload 是这个动作携带的数据。Action 需要通过 store.dispatch() 方法来发送。

1
2
3
4
{
  type: 'ADD_TODO',
  text: 'Build my first Redux app'
}

Reducer

  • Reducer 也是 pure function，这点非常重要，所以绝对不要在 reducer 里面做一些引入 side-effects 的事情，比如：
  • 直接修改 state 参数对象
  • 请求 API
  • 调用不纯的函数，比如 Data.now() Math.random()

Store

现在有了 Action 和 Reducer，Store 的作用就是连接这两者，Store 的作用有这么几个：

  • Hold 住整个应用的 State 状态树
  • 提供一个 getState() 方法获取 State
  • 提供一个 dispatch() 方法发送 action 更改 State
  • 提供一个 subscribe() 方法注册回调函数监听 State 的更改

Data Flow

redux流程的逻辑非常清晰，数据流是单向循环的，就像一个生产的流水线：

1
store（存放状态） -> container（显示状态） -> reducer （处理动作）-> store
  1. 调用 store.dispatch(action)
1
2
3
4
5
Action 是一个包含 { type, payload } 的对象，它描述了“发生了什么”，比如：
{ type: 'LIKE_ARTICLE', articleID: 42 }
{ type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
{ type: 'ADD_TODO', text: 'Read the Redux docs.' }
你可以在任何地方调用 store.dispatch(action)，比如组件内部，Ajax 回调函数里面等等。
  1. Action 会触发给 Store 指定的 root reducer
1
2
3
root reducer 会返回一个完整的状态树，State 对象上的各个字段值可以由各自的 reducer 函数处理并返回新的值。
reducer 函数接受 (state, action) 两个参数
reducer 函数判断 action.type 然后处理对应的 action.payload 数据来更新并返回一个新的 state
  1. Store 会保存 root reducer 返回的状态树
1
新的 State 会替代旧的 State，然后所有 store.subscribe(listener) 注册的回调函数会被调用，在回调函数里面可以通过 store.getState() 拿到新的 State。