Question

我有使用useReducer钩子的组件：

const init = {
  statA: true,
  statB: true
};

const reducer = (state, action) => {
  switch (action.type) {
    case "ActionA":
      return { ...state, statA: !state.statA };
    case "ActionB":
      return { ...state, statB: !state.statB };
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, init);

  const clickMe = () => {
    dispatch({ type: "ActionA" });
    dispatch({ type: "ActionB" });
    console.log(state);
  }

  return(
      <button onClick={() => clickMe()}>Click Me</button>
  );
};

单击按钮时，状态将更改。但是，当我查看日志时，它会显示以前的状态，而不是当前的更新状态。

//On the first click
//Expected
{ statA: false, statB: false }
//Reality
{ statA: true, statB: true }

//On the second click
//Expected
{ statA: true, statB: true }
//Reality
{ statA: false, statB: false }

我知道通过setState，我可以使用回调来处理更新的状态。但是使用useReducer，我不知道如何使用更新后的状态。有什么办法可以解决我的问题？

Answer 1

console.log(state)是副作用。副作用属于useEffect钩子：

  const [state, dispatch] = useReducer(reducer, init);

  useEffect(() => {
    // a condition may be added in case it shouldn't be executed every time
    console.log(state);
  }, [state]);

  const clickMe = () => {
    dispatch({ type: "ActionA" });
    dispatch({ type: "ActionB" });
  }

Answer 2

如果库未提供某些功能，则可能意味着不应按您希望的方式使用它。 setState进行回调，而Hooks则不做决定。

如果您想在状态更改时触发副作用，请在reducer本身中执行以下操作：

const reducer = (state, action) => {
  switch (action.type) {
    case "ActionA":
      console.log("action a triggered"); // <<<
      return { ...state, statA: !state.statA };
    case "ActionB":
      return { ...state, statB: !state.statB };
    default:
      return state;
  }
};

或者，如果您只想调试状态，请在App重新呈现时执行此操作：

 const [state, dispatch] = useReducer(reducer, init);
 console.log(state);

React Hooks-useReducer：在触发函数之前等待reducer完成

2 个答案: