时间戳

首页 > 解决方案 > React-Redux 增量/减量问题

javascript - React-Redux 增量/减量问题

问题描述

我正在做一些 React-Redux 练习，我注意到一个我无法理解的行为：它是否有效取决于我是否使用 + 1 / - 1 或 ++ / -- 运算符。

这是我的减速机：

const counterReducer = (state = { counter: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        counter: state.counter + 1,
      };
    case "DECREMENT":
      return {
        counter: state.counter - 1,
      };
    default:
      return state;
  }
};

它工作正常。

但是如果我将增量​​和减量更改为：

const counterReducer = (state = { counter: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        counter: state.counter++,
      };
    case "DECREMENT":
      return {
        counter: state.counter--,
      };
    default:
      return state;
  }
};

它仍然会在不更新 Redux 状态的情况下触发操作。

标签： javascriptreduxreact-redux

解决方案

因为在第二个减速器中您使用的是prefix运算符：

const counterReducer = (state = { counter: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        counter: state.counter++, //<--- prefix operator
      };
    case "DECREMENT":
      return {
        counter: state.counter--, //<--- prefix operator
      };
    default:
      return state;
  }
};

如果您使用 ++ 运算符作为前缀，例如：++var，则 var 的值增加 1；然后它返回值。

如果使用 ++ 运算符作为后缀，例如：var++，则首先返回 var 的原始值；然后 var 增加 1。

所以需要使用postfixoperator incounterReducer而不是prefixoperator：

const counterReducer = (state = { counter: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        counter: ++state.counter, //<--- postfix operator
      };
    case "DECREMENT":
      return {
        counter: --state.counter, //<--- postfix operator
      };
    default:
      return state;
  }
};

推荐阅读