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 ponent 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'
    }
  });

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 ponent 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'
    }
  });

• javascript
• reactjs
• react-hooks
• react-context
• use-reducer

• 3 dispatch an action that will set state.carts to fetchedCarts – Asaf Aviv Commented Feb 23, 2020 at 16:34

1 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 ponent is unmounted) - returning a object here would be a mistake.