React Hooks - useReducer: Wait for reducer to finish before triggering a function

Question

I have the component using useReducer Hooks:

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>
  );
};

When the button is clicked, the state will be changed. But when I view the log, it prints the previous state, not the current updated state.

//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 }

I know that with setState , I can use callback to work with updated state. But with useReducer , I don't know how to work with the updated state. Is there any way to solve my problem?

Answer 1

console.log(state) is side effect. Side effects belong to useEffect hook:

  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

If a library does not expose a certain functionality, this could mean that it is not supposed to be used in the way you want it. That setState takes a callback, while Hooks do not is probably a design decision.

If you want to trigger a side effect when the state changes, do that in the reducer itself:

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;
  }
};

Or if you just want to debug the state, do that when the App gets rerendered:

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