Обновление useReducer 'state' с помощью useEffect

Question

В моем приложении я использую React Hooks / Context API. Теперь мне нужно назначить извлеченные данные из localStorage в initialState.carts / state.carts всякий раз, когда мой компонент Provider монтируется. Это возможно, если useEffect поддерживает возврат объектов. Но невозможно вернуть объект в действиеEffect!

Теперь, как я могу решить эту проблему?

Код указан ниже,

const initialState = {
  books: books,
  carts: []
};

export const Context = createContext(initialState);

export const Provider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    if (localStorage.getItem("carts") !== null) {
      const fetchedCarts = JSON.parse(localStorage.getItem("carts"));
      //Here I want to assign 'fetchedCarts' array items in 'state.carts' or 'initialState.carts'
    }
  });

Answer 1

Вы должны отправить действие, чтобы обновить переменную state.

if (localStorage.getItem("carts") !== null) {
      const fetchedCarts = JSON.parse(localStorage.getItem("carts"));
      dispatch({ type: 'UPDATE', payload: fetchedCarts })
}

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

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

Пример структуры редуктора:

const reducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE':
      return { ...state, ...action.payload }
      break
    default:
      return state
  }
}

Я считаю, что useEffect() должен иметь массив зависимостей (потому что обновление state запустит его в текущей форме) .

Это возможно, если useEffect поддерживает возвращаемые объекты. Но невозможно вернуть объект в useEffect!

Ответом от useEffect должна быть функция (эта функция вызывается до того, как React размонтирует ловушку) - возвращение объекта здесь будет ошибка.