Reducer

什么是Reducer

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

Reducer模板

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

Reducer的使用

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

const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT_NUM':
    console.log('state', state)
      return state++
    default:
      return state;
  }
}

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

怎样在组件中调用 Reducer

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

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

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

Reducer 的拆分合并

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

import { combineReducers } from "redux"
import ×× from "./××reducers"
const rootReducer = combineReducers({
    ××: ××Reducer
})
export default rootReducer

注意：Reducer不能

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

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

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