React Hooks - useReducer: дождитесь окончания редуктора, прежде чем запускать функцию - PullRequest
Новая
       4

React Hooks - useReducer: дождитесь окончания редуктора, прежде чем запускать функцию

0 голосов
/ 07 апреля 2019

У меня есть компонент, использующий 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 я не знаю, как работать с обновленным состоянием. Есть ли способ решить мою проблему?

Ответы [ 2 ]

2 голосов
/ 07 апреля 2019

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" });
  }
1 голос
/ 07 апреля 2019

Если библиотека не предоставляет определенную функциональность, это может означать, что она не должна использоваться так, как вы хотите. То, что setState принимает обратный вызов, а Hooks - нет, вероятно, является дизайнерским решением.

Если вы хотите вызвать побочный эффект при изменении состояния, сделайте это в самом редукторе: 

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