Question

鉴于one of react-redux's official hello world example，如何实现multiply缩减器？他们实现了一个增加两个数字的减速器，但是看到一个带有输入的减速器作为乘数也是有益的。我知道这是非常基本的，但它是我另一个项目的细分版本。

这是我尝试做这项工作的原因：

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，以及（通过使用属性简写语法）一个名为integer的属性，设置为整数参数的值。

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

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

因此，您的减速机可能会出现以下情况：

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

就你的连接功能而言，mapStateToProps只知道你的状态（不是你的动作），所以它只需要返回你想要的状态部分。它是第二个参数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))
    }
  })
)

编辑：可能是我误解了你的'重构'，现在看到你问的是使用mapStateToProps来访问多个reducer。好吧，我仍然认为我的例子可能会有所帮助，因为您试图通过相关操作的名称访问Reducer的结果。你想要的是使用reducer本身的名称，假设你正在使用combineReducers，它是Redux如何将许多reducer映射到单个状态对象的。

将multiply reducer添加到Simplest Redux示例中

1 个答案: