向最简单的 Redux 示例添加乘法缩减器

Question

给定 one of react-redux's official hello world example，我如何实现 multiply reducer？他们实现了一个将两个数字相加的缩减器，但是看到一个将输入作为乘数的缩减器也是有益的。我知道这是非常基础的，但这是我对另一个项目的分解版本。

以下是我的尝试：

const MULTIPLY_ACTION = 'MULTIPLY_ACTION'
   function multiplyAction(integer) {
     return {
       type: MULTIPLY_ACTION,
       integer
     }
   }

export function multiplier(state = { integer: 0 }, action) {
  switch () {
    case MULTIPLY_ACTION:
      console.log('multiplying', action)
      return {
        multiple: state.integer * action.multiplier
      }
    default:
      return state
  }
}

我运行遇到的问题：

重构并使 mapStateToProps() 与多个 reducer 一起工作。我错过了什么？ [参见下面的重构]
将 increaseAction 对象字面量重构为函数（动作类型？）。在原始示例中，当我将 const increaseAction = { type: 'increase' } 重构为 const increaseAction = () => {type: 'increase'} 时，不再调用计数器减速器并且我的应用程序静默失败（我正在使用 create-react-app 作为构建）。

[重构].

function mapStateToProps(state) {
  const { increaseAction, multiplyAction } = state

  return {
    increaseAction,
    multiplyAction
  }
}

非常感谢！

Answer 1

首先，您的操作作为一个对象被分派到您的 reducer，因此您需要使用您定义的对象形状。例如，您将操作定义为具有类型：MULTIPLY_ACTION，以及（通过使用属性 shorthand 语法）一个称为整数的属性，设置为整数参数。

因此你的 reducer 需要根据类型进行切换（你现在的 switch 语句中有一个空表达式，而不是说 action.type），然后它需要使用 action.integer。

然后，您的 reducer 代表了您整个应用程序状态对象的一部分。现在，您将状态的默认形状定义为具有属性的对象，名为 integer，值为 0。您希望您的操作 case 声明为 return 与默认状态对象的形状相同，因此它应该 return 一个具有单个属性的对象称为 integer。换句话说，你的 reducer 应该总是 return 相同的对象形状（即使属性不同，或者如果那是你的应用程序的有效值，则可能为 null。只是不是未定义。）

所以你的减速机可能有一个案例说：

return { integer: state.integer * action.integer }

就您的连接功能而言，mapStateToProps 只知道您的状态（而不是您的操作），因此它只需要 return 您想要的状态部分。第二个参数 mapDispatchToProps 与您的操作有关。所以你想要这样的东西：

connect(
  state => ({
    multiplierInteger: state.multiplier.integer // remember that you are looking within your reducer multiplier which contains an object that has the field you want, integer
  }),
  dispatch => ({
    multiplyAction(val) {
      dispatch(multiplyAction(val))
    }
  })
)

edit：可能是我误解了你的'refactor'，现在看到你问的是关于使用 mapStateToProps 来访问多个 reducer。好吧，我仍然认为我的示例可能会有所帮助，因为您试图通过相关操作的名称访问缩减器的结果。您想要的是使用 reducer 本身的名称，假设您使用的是 combineReducers，这就是 Redux 将许多 reducer 映射到单个状态对象的方式。

向最简单的 Redux 示例添加乘法缩减器

Adding a multiply reducer to the Simplest Redux Example

reactjs

redux

react-redux