javascript - How to set useReducer initial state using API response? - Stack Overflow

admin管理员组

文章数量:1404927

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;

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;

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

Share Improve this question Follow asked Dec 13, 2021 at 9:49 TajminTajmin 40311 gold badge88 silver badges2323 bronze badges 1

• 1 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 Commented Dec 13, 2021 at 9:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 mon 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;
  }
};

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 ponents 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>);

本文标签： javascriptHow to set useReducer initial state using API responseStack Overflow