时间戳

首页 > 解决方案 > Redux：state 如何知道 action 到达时应该选择哪个子 reducer？

javascript - Redux：state 如何知道 action 到达时应该选择哪个子 reducer？

问题描述

在阅读Redux库的文档时，我有一个关于combineReducers.

Phase1：单减速器

当我们有一个 reducer 时，它会处理各种动作类型。

export default function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    case 'FOO'
      return state + 100
    case 'BAR'
      return state - 100
    case 'SHOW_ME_THE_MONEY'
      return state + 10000000000
    default:
      return state
  }
}

Phase2：我们将它们分成不同的reducer

好吧，你有一个代码审查员说让一个神减速器来处理所有动作是不好的。请创建不同的减速器来做不同的事情。

.

export default function cheat(state = [], action) {
  switch (action.type) {
    case 'FOO'
      return state + 100
    case 'BAR'
      return state - 100
    case 'SHOW_ME_THE_MONEY'
      return state + 10000000000
  }
}


export default function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1

    default:
      return state
  }
}

然后，我们使用 combineReducers 将它们合并为一个。

import { combineReducers } from 'redux'
import todos from './cheat'
import counter from './counter'
export default combineReducers({
  cheat,
  counter
})

然后，我们向 state 发送一个动作。

store.dispatch({
  type: 'SHOW_ME_THE_MONEY',
  text: 'To Buy new Macbook Pro 16'
})

问题

当一个动作FOO到达时，状态如何知道应该选择哪个子减速器并用于计算新状态？

我想动作类型和reducer之间的映射是必不可少的，但似乎没有必要，这在文档中进行了演示。

标签： javascriptredux

解决方案

combineReducers只是在您的子减速器键（cheat，counter）和相应的状态切片（ state.cheat， ）之间进行映射state.counter。

redux 基础教程将引导您了解这个称为 reducer 组合的概念。

子 reducer 接收所有动作，但只接收它们的状态片段：

let {
  createStore,
  combineReducers
} = Redux

function cheat(state = 0, action) {
  console.log("cheat reducer receive action: ", action.type)
  console.log("cheat reducer slice: ", state)
  switch (action.type) {
    case 'FOO':
      return state + 100
    case 'BAR':
      return state - 100
    case 'SHOW_ME_THE_MONEY':
      return state + 10000000000

    default:
      return state
  }
}

function counter(state = 0, action) {
  console.log("counter reducer receive action: ", action.type)
  console.log("counter reducer slice: ", state)
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1

    default:
      return state
  }
}

let combined = combineReducers({
  cheat,
  counter
})
let store = createStore(combined)

store.subscribe(() => console.log("store state: ", store.getState()))

store.dispatch({
  type: 'INCREMENT'
})
store.dispatch({
  type: 'INCREMENT'
})
store.dispatch({
  type: 'FOO'
})
store.dispatch({
  type: 'BAR'
})
store.dispatch({
  type: 'SHOW_ME_THE_MONEY'
})
<script src="https://unpkg.com/redux/dist/redux.js"></script>

推荐阅读