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

Question

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

Как теперь решить проблему?

Код ниже,

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) - возврат объекта здесь будет ошибкой.