Updating useReducer 'state' using useEffect

Question

In my application, I am using React Hooks/Context API. Now I need to assign fetched data from localStorage to initialState.carts / state.carts whenever my Provider component did mount. It would possible if useEffect supports returning objects. But it's not possible to return object in useEffect!

Now how can I solve the problem?

Code is below,

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

You have to dispatch an action to update your state variable.

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

So you have to add this action type to your reducer switch which you already used here:

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

En example of reducer structure:

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

I believe that useEffect() should have a dependencies array (because the update of state will retrigger it in the current form).

It would possible if useEffect supports returning objects. But it's not possible to return object in useEffect!

The response from the useEffect should be a function (that function is being called before component is unmounted) - returning a object here would be a mistake.