在最简单的Redux示例中添加乘法减速器

给出一个react-redux的官方hello world示例，我如何实现一个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
  }
}

我遇到的问题:

将increaseAction对象字面值重构为函数(动作类型?)在最初的例子中，当我将const increaseAction = { type: 'increase' }重构为const increaseAction = () => {type: 'increase'}时，计数器减少器不再被调用，我的应用程序无声地失败了(我使用create-react-app作为构建)。

(重构)。

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

感谢!

首先，您的动作作为对象被分派给您的reducer，因此您需要使用您定义的对象形状。例如，您将操作定义为具有类型:MULTIPLY_ACTION，以及(通过使用属性简写语法)一个称为integer的属性，设置为integer参数的值。

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

然后，您的reducer表示整个应用程序状态对象的一部分。现在，您将该状态块的默认形状定义为具有属性integer的对象，其值为0。您希望您的动作case语句返回与默认状态对象相同的形状，因此它应该返回一个具有单个属性integer的对象。换句话说，您的reducer应该始终返回相同的对象形状(即使属性不同，或者如果这是您的应用程序的有效值，则可能为空)。只是没有定义。)

那么你的减速器可能会有这样的情况:

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

就你的connect函数而言，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映射到单个状态对象的方式。

相关内容

最新更新

热门标签：