title: Use value from object in reducer
body: <p>I have an object stored in my reducer:</p>
  <pre><code>editProductBasket: [{
      name: &quot;roger&quot;,
      price: &quot;12&quot;,
  }],
  </code></pre>
  <p>And I'm trying to use the values in a different part of my with the following code:</p>
  <pre class="lang-js prettyprint-override"><code>function PhoneMockupEdit() {
    const [
      {
        editProductBasket: { name, price, description, quantity },
      },
      dispatch,
    ] = useStateValue();
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>return (
      &lt;div className=&quot;phone__mockup&quot;&gt;
        &lt;h1&gt;{name}&lt;h2&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>However, the data from the reducer is not being shown. Any ideas why?</p>
  <p>Here is my <code>StateProvider</code> code:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { createContext, useContext, useReducer } from &quot;react&quot;;
  
  // create the data layer
  export const StateContext = createContext();
  
  // Build a provider so we can wrap entire app inside of provider so we access data layer
  export const StateProvider = ({ reducer, initialState, children }) =&gt; (
    &lt;StateContext.Provider value={useReducer(reducer, initialState)}&gt;
      {children}
    &lt;/StateContext.Provider&gt;
  );
  
  // This is where we use it in a component
  export const useStateValue = () =&gt; useContext(StateContext);
  </code></pre>
  <p>And here is my reducer code:</p>
  <pre class="lang-js prettyprint-override"><code>export const initialState = {
    editProductBasket: [],
   
  };
  
  function reducer(state, action) {
    console.log(action);
    switch (action.type) {
  
      case &quot;SET_EDIT_PRODUCT&quot;:
        return {
          ...state,
          editProductBasket: [...state.editProductBasket, action.item],
        };
  
      default:
        return state;
    }
  }
  export default reducer;
  </code></pre>