title: React-redux state array management
body: <p>So I basically started learning Redux and wanted to create a simple store app where you can add the phones to the cart. I have created a state object and within it, I have created an array with objects with a list of items in the store. I wanted to update on [+] click the number of items ordered but it doesn't work for now. I have been struggling with that for 1 hour already and still do not see where the problem might be.</p>
  
  <p>Reducer looks like that:</p>
  
  <pre><code>const initialState = {
  liked:0,
  cart:0,
  item: [
      {
          id:1,
          name: 'Iphone 8',
          price: 2000,
          desc: 'The new Iphone 8 available at our store!',
          orderedNum: 0
      },
      {
          id:2,
          name: 'Iphone 6',
          price: 1500,
          desc: 'The new Iphone 6 available at our store!',
          orderedNum: 0
      },
      {
          id:3,
          name: 'Samsung S8',
          price: 2200,
          desc: 'The new Samsung S8 available at our store!',
          orderedNum: 0
      },
      {
          id:4,
          name: 'Xiaomi Mi 6',
          price: 1400,
          desc: 'The new Xiaomi Mi 6 available at our store!',
          orderedNum: 0
      },
      {
          id:5,
          name: 'Pocophone P1',
          price: 2100,
          desc: 'The new Pocophone P1 available at our store!',
          orderedNum: 0
      },
      {
          id:6,
          name: 'Nokia 3310',
          price: 999,
          desc: 'The new Nokia 3310 available at our store!',
          orderedNum: 0
      },
  ]
  }
  
  const reducer = (state = initialState, action) =&gt; {
  const newState = {...state};
  
  switch(action.type) {
      case 'ADD_NUM':
          return state.item.map((el, index) =&gt; {
              if(el.id === action.id ){
                  return {
                      ...el,
                      orderedNum: el.orderedNum + 1
                  }
              }
  
              return el;
          })
      default:
          break;
  }
  
  return newState;
  }
  
  export default reducer;
  </code></pre>
  
  <ul>
  <li><p>I have the action:</p>
  
  <pre><code>const mapStateToProps = state =&gt; {
  return {
  item: state.item
  }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
  return {
  addNum: () =&gt; dispatch ({
    type: 'ADD_NUM',
    id: this.props.id,
   value: 1
  })
  }
  </code></pre></li>
  </ul>
  
  <p>I have tried it in a different ways but I believe it could be the problem with nesting in the reducer.</p>
  
  <p>Could someone advise?</p>