use the value of the object in the reducer

Question

You were destructuring your state incorrectly.

The editProductBasket property is an array not an object, so you need to destructure off the first element of the array, rather than try and destructure the properties off of the array as a whole.

      const [
        {
          editProductBasket: [{ name, price, description, quantity }],
        },
        dispatch,
      ] = useStateValue();

const { createContext, useContext, useReducer } = React;

// create the data layer
const StateContext = createContext();

// Build a provider so we can wrap entire app inside of provider so we access data layer
const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);

// This is where we use it in a component
const useStateValue = () => useContext(StateContext);

const initialState = {
  editProductBasket: [
    {
      name: 'roger',
      price: '12',
    },
  ],
};

function reducer(state, action) {
  console.log(action);
  switch (action.type) {
    case 'SET_EDIT_PRODUCT':
      return {
        ...state,
        editProductBasket: [...state.editProductBasket, action.item],
      };

    default:
      return state;
  }
}

function PhoneMockupEdit() {
  const [
    {
      editProductBasket: [{ name, price, description, quantity }],
    },
    dispatch,
  ] = useStateValue();
  return (
    <div className="phone__mockup">
      <h1>{name}</h1>
    </div>
  );
}

ReactDOM.render(
  <StateProvider reducer={reducer} initialState={initialState}>
    <PhoneMockupEdit />
  </StateProvider>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"/>

Leave a Comment Cancel Reply