Redux的API

65 阅读2分钟

store

  • store 就是保存数据的地方,整个应用只能有一个 store。
  • redux 提供 createStore 这个函数,用来创建一个 store 以存放整个应用的 state:


state

  • store 对象包含所有数据。如果想得到某个时点的数据,就要对 store 生成快照。这种时点的数据集合,就叫做 state。
  • 如果要获取当前时刻的 state,可以通过 store.getState() 方法拿到:


action

  • state 的变化,会导致视图的变化
  • action 就是视图发出的通知,通知store此时的 state 应该要发生变化了
  • action 是一个对象。其中的 type 属性是必须的,表示 action 的名称


Action Creator

  • view 要发送多少种消息,就会有多少种 action,
  • 可以定义一个函数来生成 action,这个函数就称作 Action Creator

-   调用 increment() 时就会返回 { type: 'INCREMENT' }

-   调用increment(10)返回 { type: 'INCREMENT', payload: 10 }

store.dispatch()

  • store.dispatch() 是视图发出 action 的唯一方法


reducer

  • store 收到 action 以后,必须给出一个新的 state,这样视图才会进行更新。state 的计算(更新)过程则是通过 reducer 实现。
  • reducer 是一个函数,它接受 action 和当前 state 作为参数,返回一个新的 state:

  • 为了实现调用 store.dispatch 方法时自动执行 reducer 函数,需要在创建 store 时将将 reducer 传入 createStore 方法:

  • 上面代码中,createStore 方法接受 reducer 作为参数,生成一个新的 store。以后每当视图使用 store.dispatch 发送给 store 一个新的 action,就会自动调用 reducer函数,得到更新的 state。
  • redux-actions 提供了 handleActions 方法用于处理多个 action:


拆分、合并 reducer

  • 在一个 react 应用中只能有一个 store 用于存放应用的 state。组件通过调用 action 函数,传递数据到 reducer,reducer 根据数据更新对应的 state。

  • 在大型应用中,应用的 state 必然十分庞大,导致 reducer 的复杂度也随着变大。此时可以考虑将 reducer 拆分成多个单独的函数,让每个函数负责独立管理 state 的一部分。

    • redux 提供了 combineReducers 辅助函数,可将独立分散的 reducer 合并成一个最终的 reducer 函数,然后在创建 store 时作为 createStore 的参数传入。

    • 我们可以根据业务需要,把所有子 reducer 放在不同的目录下,然后在在一个文件里面统一引入,最后将合并后的 reducer 导出: