CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-contextuse-reducer
Ebrahim Khalil Amid
Ebrahim Khalil Amid

Reputation: 426

Updating useReducer 'state' using useEffect

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

Upvotes: 9

Views: 13584

Answers (1)

Deykun
Deykun

Reputation: 1271

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.

Upvotes: 5

Related Questions