减速器内的状态值分配被执行两次

Question

我正在使用 Reacts useReducer 钩子。我正在尝试增加 +1 或 -1，具体取决于按下 react 上的哪个按钮。我希望在返回值之前分配值，以便可以将值发布到数据库。当我运行代码时，它在 0-1 上增加 1，但之后它增加 2。我尝试使用 console.log 查看值更改，它只运行了一次 console.log，但运行了两次增量分配。在返回对象之前，如何在案例内只运行一次值分配。它还为每个值更改运行 POST 请求，（2次）

const reducer = (state, action) => {
  switch (action.type) {
      case "increment":{


   
    state.count = state.count +1;
    console.log("Inside Reducer, state.count", state.count);
    postFourthButtonClick(state.count)
   
    return { count: state.count}
}
case "decrement":{

    state.count -=1;
    console.log("Inside decrement part of reducer, state.count:", state.count);
    postFourthButtonClick(state.count);
    return {count: state.count}
}
default:
  throw new Error();

}

Answer 1

您不应该在 reducer 函数中真正执行副作用（例如发出 API 请求）。副作用属于 useEffect 钩子。

你想做的大概是这样的：

const reducer = (state, action) => {
  switch (action.type) {
    case "increment": {
      return { count: state.count + 1 };
    }
    case "decrement": {
      return { count: state.count - 1 };
    }
    default:
      throw new Error();
  }
};

您将拥有一个调用您的 api 的 useEffect 钩子。

默认情况下，useEffect 在第一次渲染后和每次更新后都会运行。如果您希望每次某个值更改时都重新运行它，您可以将该值放入依赖项数组中。

useEffect(()=>{
    makeSideEffect()
}, [valueThatDecidesWhenToRerun])