title: Increase count and decrease count when action is dispatch
body: <p>I am currently developing a front end application using react-redux. But I am very new to this language. </p>
  
  <p>So basically I have the following UI</p>
  
  <p><a href="https://i.stack.imgur.com/fOzaj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fOzaj.png" alt="enter image description here"></a></p>
  
  <p>What I am trying to achieve is whenever users increase or decrease the option, it will store to the store procedure, and finally make an API call to backend and calculate pricing. </p>
  
  <p>Before API call, my idea is I will let users to increase/decrease the option and finally when the user is done, i will take that array of object and submit to the api endpoint. </p>
  
  <p>Unfortunately, It seems like the following scenario is failed. </p>
  
  <ul>
  <li><p>I increase option 1, it will  save to the state as an array of object
  first time with quantity and optionId  [OK]  </p></li>
  <li><p>After that, I will increase the option 2, since it is the new option,
  I will push the object to the existing array. [OK]</p></li>
  <li><p>When I try to increase option 1 again, it has to check whether option
  1 is already inside the array, if there is option 1, it will just<br>
  increase that option quantity. but my code does not behave that way. [FAILED]</p></li>
  </ul>
  
  <p>below is my Component </p>
  
  <pre><code>import React, {Component} from 'react';
  import {handleIncreaseOption} from '../actions/option';
  import {Button, Card, Col, Row, Statistic} from "antd";
  import {MinusOutlined, PlusOutlined} from '@ant-design/icons';
  import {connect} from 'react-redux';
  const {Meta} = Card;
  
   class FlavourCard extends Component {
  
       state = {
           quantity: 0,
           optionId: this.props.optionId
       }
  
      increase = () =&gt; {
          let count = this.state.quantity + 1;
          this.setState({
              quantity: count,
              optionId: this.props.optionId
          }, function(){
  
              console.log('this state before going in', this.state);
  
              this.props.dispatch(handleIncreaseOption(this.state));
          });
  
  
      }
  
      decline = () =&gt; {
          let count = this.state.count - 1;
          if (count &lt; 0) {
              count = 0;
          }
          this.setState({count: count});
          console.log(this.state);
      }
  
      render() {
          const {flavourImg, itemTitle} = this.props;
  
          return (
              &lt;Card
                  hoverable
                  cover={&lt;img alt="example" className="flavour-img" src={flavourImg}/&gt;}
              &gt;
                  &lt;Meta
                      title={itemTitle}
                      style={{textAlign: 'center'}}
                      description={
                          &lt;Row justify="start" gutter={12}&gt;
                              &lt;Col span={10} style={{textAlign: 'right', paddingTop: '6px'}}&gt;
                                  &lt;Button onClick={this.decline} size="small"&gt;
                                      &lt;MinusOutlined/&gt;
                                  &lt;/Button&gt;
                              &lt;/Col&gt;
  
                              &lt;Col span={4}&gt;
                                  &lt;Statistic value={this.state.quantity} style={{fontSize: '10px'}}/&gt;
                              &lt;/Col&gt;
  
                              &lt;Col span={10} style={{textAlign: 'left', paddingTop: '6px'}}&gt;
                                  &lt;Button onClick={this.increase} size="small"&gt;
                                      &lt;PlusOutlined/&gt;
                                  &lt;/Button&gt;
                              &lt;/Col&gt;
                          &lt;/Row&gt;
                      }
                  /&gt;
              &lt;/Card&gt;
  
          )
      }
  }
  
  function mapStateToProps(state) {
       return{
           loadingBar: state.loadingBar
       }
  }
  
  export default connect(mapStateToProps) (FlavourCard)
  </code></pre>
  
  <p>This is my action class </p>
  
  <pre><code>export const RETRIEVE_OPTIONS = 'RETRIEVE_OPTIONS';
  export const INCREASE_OPTIONS = 'INCREASE_OPTIONS';
  
  export function receiveOptions( option ) {
      return {
          type: RETRIEVE_OPTIONS,
          option
      }
  }
  
  export function handleIncreaseOption ( option ) {
      return {
          type: INCREASE_OPTIONS,
          option
      }
  }
  </code></pre>
  
  <p>This is my reducer</p>
  
  <pre><code>import {RETRIEVE_OPTIONS, INCREASE_OPTIONS} from "../actions/option";
  
  export default function option ( state = null , action )
  {
      switch (action.type) {
          case RETRIEVE_OPTIONS:
              return {
                  ...state,
                  ...action
              }
  
          case INCREASE_OPTIONS:
  
              if (  !state.hasOwnProperty('addOption') ) {
                  return {
                      ...state,
                      addOption: [
                                      {
                                          quantity: action.option.quantity,
                                          optionId: action.option.optionId
                                      }
                                  ]
                  }
              }
  
              state.addOption.map((opt) =&gt; {
                  if(opt.optionId === action.option.optionId) {
                      opt.quantity = action.option.quantity;
                  }else {
                      let originalAddOption = state.addOption;
  
                      originalAddOption.push({
                          quantity: action.option.quantity,
                          optionId: action.option.optionId
                      })
  
                  }
                  return {
                      ...state,
                      ...action
                  }
              })
  
  
          default:
              return state
      }
  }
  </code></pre>
  
  <p>I believe that my "INCREASE_OPTIONS" reducer is something wrong, because, the correct logic should be when there is a new optionId, it will add in as a new object, and if the optionId is existing one, it will just increase the entity. For my current code, whenever I make a second option to increase, it will just add in a new object with new quantity value. I have attached the console result below</p>
  
  <p><a href="https://i.stack.imgur.com/28qMS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/28qMS.png" alt="enter image description here"></a></p>
  
  <p>How can I achieve when there is existing option, just increase/decrease the quantity and if option is newly added, make a new object and push to the array? Thanks in advance</p>