React useReducer Hook срабатывает дважды / как передать реквизит редуктору?

Как вы указали, причина та же, что и у моего связанный ответ, на который вы ссылались. Вы воссоздаете свой редюсер всякий раз, когда Provider повторно рендерится, поэтому в некоторых случаях React выполнит редьюсер, чтобы определить, нужно ли ему повторно рендерить Provider, и если ему нужно повторно рендерить, он обнаружит, что редуктор изменен, поэтому React необходимо выполнить новый редьюсер и использовать созданное им новое состояние, а не то, что было возвращено предыдущей версией редьюсера.

Когда вы не можете просто переместить редьюсер из функционального компонента из-за зависимости от свойств, контекста или другого состояния, решение состоит в том, чтобы запомнить ваш редюсер с помощью useCallback, чтобы вы создавали новый редуктор только при изменении его зависимостей (например, productsList в твоем случае).

Еще одна вещь, о которой следует помнить, это то, что вам не следует слишком беспокоиться о том, что ваш редуктор будет выполняться дважды для одной отправки. Предположение, которое делает React, состоит в том, что редьюсеры, как правило, будут достаточно быстрыми (они не могут ничего делать с побочными эффектами, выполнять вызовы API и т. д.), поэтому стоит рисковать повторным выполнением их в определенных сценариях в чтобы попытаться избежать ненужных повторных рендеров (что может быть намного дороже, чем редюсер, если под элементом с редуктором находится большая иерархия элементов).

Вот модифицированная версия Provider с использованием useCallback:

const Context = React.createContext();
const Provider = props => {
  const memoizedReducer = React.useCallback(createReducer(productsList), [productsList])
  const [state, dispatch] = React.useReducer(memoizedReducer, []);

  return (
    <Context.Provider value = {{ state, dispatch }}>
      {props.children}
    </Context.Provider>
  );
}

Вот модифицированная версия вашего кода: https://codepen.io/anon/pen/xBdVMp?editors=0011

Вот пара ответов, связанных с useCallback, которые могут быть полезны, если вы не знакомы с тем, как использовать этот хук:

• Проблема с простым примером React Hooks useCallback
• React Hooks useCallback заставляет дочерний элемент повторно отображать

Отделите Редюсер от функционального компонента, который помог мне решить мою проблему.

Пример, основанный на превосходном ответе Райана.

  const memoizedReducer = React.useCallback((state, action) => {
    switch (action.type) {
      case "addRow":
        return [...state, 1];
      case "deleteRow":
        return [];
      default:
        throw new Error();
    }
  }, []) // <--- if you have vars/deps inside the reducer that changes, they need to go here

  const [data, dispatch] = React.useReducer(memoizedReducer, _data);

Когда я прочитал исходный код useContext, я обнаружил

const useContext = hook(class extends Hook {
  call() {
    if (!this._ranEffect) {
      this._ranEffect = true;
      if (this._unsubscribe) this._unsubscribe();
      this._subscribe(this.Context);
      this.el.update();
    }
  }

После первого обновления ставится лайк effect после обновления. После того, как value подписывается на правильный контекст, например, разрешая значение из Provider, он запрашивает обновление еще один. Это не цикл, благодаря флагу _ranEffect.

Мне кажется, что если вышесказанное верно для React, движок рендеринга вызывается дважды.