Reducer

什么是Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer

Reducer模板

  1. const reducer = function (state, action) {
  2. // ...
  3. return new_state;

Reducer的使用

Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State

  1. const reducer = (state = 0, action) => {
  2.   switch (action.type) {
  3.     case 'INCREMENT_NUM':
  4.     console.log('state', state)
  5.       return state++
  6.     default:
  7.       return state;
  8.   }
  9. }

上面代码中，reducer函数收到名为INCREMENT_NUM的 Action 以后，就返回一个新的 State，作为加法的计算结果。

怎样在组件中调用 Reducer

  • 实际应用中，Reducer 函数不用手动调用，store.dispatch方法会触发 Reducer 的自动执行。

  • 为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

  1. import { createStore } from 'redux';
  2. const store = createStore(reducer);

Reducer 的拆分合并

我们可能会分模块和功能写多个 reducer 文件，但最终，我们都需要把它合并到一个里面，这需要使用redex中的combineReducers

  1. import { combineReducers } from "redux"
  2. import ×× from "./××reducers"
  3. const rootReducer = combineReducers({
  4.     ××: ××Reducer
  5. })
  6. export default rootReducer

注意：Reducer不能

  1. 不要修改state（返回一个新的state）

  2. 执行有副作用的操作，如 API 请求和路由跳转

  3. 调用非纯函数，如 Date.now() 或 Math.random()