title: Get item details react/redux hooks
body: <p>I'm building an eCommerce project using hooks for Redux and React and I'm stumped on how to get the individual details for each item. When I click on the item, I only retrieve the details of the first item in the array no matter which item is clicked with the current set up. When I use state.products.find(item => item.id === item) instead of the code below for details const, I get a TypeError: Cannot read property x of undefined. Any help is appreciated. </p>
  
  <pre><code>function App() {
    return (
        &lt;Provider store={store}&gt;
        &lt;Navbar/&gt;
          &lt;Switch&gt;
            &lt;Route exact path="/" component={Home}/&gt;
            &lt;Route exact path='/products' component={Products}/&gt;
            &lt;Route exact path="/products/:prodId" component={ProductDetail}/&gt;
            &lt;Route exact path="/cart" component={Cart}/&gt;
          &lt;/Switch&gt;
        &lt;/Provider&gt;
    );
  }
  </code></pre>
  
  <p>Reducer</p>
  
  <pre><code>const initialState = {
      items:[],
      prodId: {},
      count: 0
   }
  
  export default function (state = initialState, {payload,type}){
      switch(type){
          case types.GET_PRODUCTS:
              return{
                  ...state,
                  items: payload,
              }
          case types.GET_ITEM:
              return{
                  ...state,
                  prodId: payload
              }
              default:
                  return state;
  
      }  
  }
  </code></pre>
  
  <p>Actions</p>
  
  <pre><code>    const api = 'http://localhost:8000/products'
  export const getProds = ()=&gt; dispatch =&gt;{
      console.log('fethcin')
      fetch(api)
      .then(res =&gt;res.json())
      .then(data =&gt; {
          // return {type: GET_PRODUCTS, payload:data}
          dispatch({type: types.GET_PRODUCTS, payload:data});
      }
      )
  }
  
  export const getDetails = id =&gt; dispatch =&gt; {
       dispatch({type: types.GET_ITEM, payload: id})
  }
  </code></pre>
  
  <p>Product</p>
  
  <pre><code>const Product = ({product}) =&gt; {
  
  const dispatch = useDispatch()
  
  const {id, title, price, isFreeShipping} = product
  
  return (
      &lt;div className='prod-container'&gt;
      &lt;div className="product"&gt;
          &lt;h2 className='prod-title'&gt;{title}&lt;/h2&gt;
         &lt;p className='prod-price'&gt;{price}&lt;/p&gt;
         &lt;span className='prod-ship'&gt;{isFreeShipping}&lt;/span&gt;
         &lt;button onClick={()=&gt; dispatch(getDetails(id))}&gt;&lt;Link to={{pathname:`/products/${id}`}}&gt; View More &lt;/Link&gt; &lt;/button&gt;
         {/* &lt;button  className='btn prod-details'&gt;View Item&lt;/button&gt; */}
      &lt;/div&gt;
      &lt;/div&gt;
  )
  </code></pre>
  
  <p>}</p>
  
  <p>Details</p>
  
  <pre><code>const ProductDetail = ({match}) =&gt; {
  const product = match.params.prodId
  
  const details = useSelector(state =&gt; state.products.items.find(item =&gt; item.id === product))
  
  const {sku, count, title, description, availableSizes, price, isFreeShipping} = details
  
  return (
      &lt;div className='prodDetaul'&gt;
          &lt;p&gt;{title}&lt;/p&gt;
          &lt;p&gt;{description}&lt;/p&gt;
          &lt;p&gt;{price}&lt;/p&gt;
          &lt;p&gt;{isFreeShipping}&lt;/p&gt;
           &lt;p&gt;{availableSizes}&lt;/p&gt;
           &lt;p&gt;{sku}&lt;/p&gt;
           &lt;Counter count={count}/&gt;
           &lt;button className='btn btn-chkot'&gt;&lt;Link to='/cart'&gt;Cart&lt;/Link&gt;&lt;/button&gt;
      &lt;/div&gt;
  )
  </code></pre>
  
  <p>}</p>