How to set useReducer initial state using API response?

Question

I'm new to React and trying to build an app with a cart feature where users can add robots to the cart. I'm using Context API to provide cart across the app and useReducer for states. The robots are being fetched from a server and load just fine. But I can't seem to find a way to set the initial state of the reducer using fetched products. The state always returns an empty array for robots. How to solve this?

const CartProvider = ({ children }) => {
    const [robots, setRobots] = useState([]);

    useEffect(() => {
        fetch('http://localhost:8000/api/robots')
            .then(res => res.json())
            .then(data => setRobots(data?.data))
    }, [])

    const initialState = {
        robots: [...robots],
        cart: []
    }
    const [state, dispatch] = useReducer(cartReducer, initialState);

    return (
        <CartContext.Provider value={{ state, dispatch }}>
            {children}
        </CartContext.Provider>
    );
}
export default CartProvider;

Since the initial state value is fetched asynchronously you'll need to dispatch an action to set the `state` value. Can you share your `cartReducer` function and any related code like actions and action creators? — Drew Reese, Dec 13 '21 at 09:55

Ramesh Reddy · Answer 1 · 2023-05-04T22:34:43.197

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

useReducer will not monitor changes to initialState, it will only consider its initial value. You can just dispatch an action to update the state once the data is fetched.

const initialState = {
    robots: [],
    cart: []
}

const CartProvider = ({ children }) => {
    const [state, dispatch] = useReducer(cartReducer, initialState);

    useEffect(() => {
        fetch('http://localhost:8000/api/robots')
            .then(res => res.json())
            .then(data => {
                // dispatch action to update the reducer state 
            })
    }, [])
    

    return (
        <CartContext.Provider value={{ state, dispatch }}>
            {children}
        </CartContext.Provider>
    );
}
export default CartProvider;

If the nested components don't work well until the state is populated then you can conditionally render children:

  return (<CartContext.Provider value={{ state, dispatch }}>
          {state?.robots?.length > 0 && children}
        </CartContext.Provider>);

Thanks! I had only one option to choose an answer as the correct one. Shame! BTW, apart from the conditional rendering, everything worked. Condition on the context was causing errors. — Tajmin, Dec 15 '21 at 05:26

score 3 · Accepted Answer · answered Dec 13 '21 at 10:01

Since the initial state value is fetched asynchronously you'll need to dispatch an action to set the state value.

Example:

const cartReducer = (state, action) => {
  switch(action.type) {
    ... other reducer cases ...

    case 'INITIALIZE_CART': 
      return action.payload;

    default:
      return state;
  }
};

CartProvider

const initialState = {
  robots: [],
  cart: []
};

const CartProvider = ({ children }) => {
  const [robots, setRobots] = useState([]);

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

  useEffect(() => {
    fetch('http://localhost:8000/api/robots')
      .then(res => res.json())
      .then(data => {
        dispatch({
          type: 'INITIALIZE_CART',
          payload: {
            ...initialState,
            robots: data?.data,
          }
        });
      });
  }, []);

  return (
    <CartContext.Provider value={{ state, dispatch }}>
      {children}
    </CartContext.Provider>
  );
};

It's common to also hold some state on the app initialization status. UI conditionally renders based on this state value.

Example:

const initialState = {
  initialized: false,
  robots: [],
  cart: []
};

...

const cartReducer = (state, action) => {
  switch(action.type) {
    ... other reducer cases ...

    case 'INITIALIZE_CART': 
      return {
        ...action.payload,
        initialized: true,
      };

    default:
      return state;
  }
};

Thank you. Worked like a charm. Quick question though - So, If I may. I can use the variable 'initialized' value for conditionally rendering a loading spinner of sorts in child components before data from API response load, right? — Tajmin, Dec 15 '21 at 05:22

How to set useReducer initial state using API response?

2 Answers2