title: unable to fetch update redux state in state less component reactjs
body: <p>In my reactJs app I'm using redux-thunk, when I'm updating redux state my stateless component is not getting updated state value.<br>
  my <strong>Addons.js</strong></p>
  
  <pre><code>import React from 'react';
  import {connect} from 'react-redux';
  import {addOnSelected, addonsCount, updateVehData} from '../../actions'
  import { Card,Row,Col,Avatar } from 'antd';
  import { Collapse} from 'antd';
  const Panel = Collapse.Panel;
  import HelperImg from '../../../public/images/Helper.png'
  
  const Addons = (props)=&gt;{
      console.log(props.VehcileData,"asd")
      let addonsCards = [];
  
      const addonsCard = (addon)=&gt;{
          addonsCards.push(
              &lt;Col lg={{span:7,offset:1}} key={addon.text} style={{paddingBottom:'2rem'}}&gt;
              &lt;Card
              type="inner"
              // title="Small Vehicle"
              id='addonCard'
              hoverable
              onClick={(e)=&gt;{(e.target.id !== 'minus' &amp;&amp; e.target.id !== 'adQty' &amp;&amp; e.target.id !== 'plus') &amp;&amp; props.updateVehData(addon) }}
              className={`${addon.selected ? 'addSelected' :''} ad_card`}
          &gt;
              &lt;Row type="flex" justify="space-around" align="middle" gutter={16}&gt;
                  &lt;Col lg={{span:16}} xs={{span:24}} style={{padding:'0px'}} &gt;
                      &lt;div className='ad_img' align='middle'&gt;
                          &lt;Avatar src={HelperImg} /&gt;
                      &lt;/div&gt;
                      &lt;div align='middle'&gt;
                      &lt;h3 className='ad_title'&gt;{addon.text}&lt;/h3&gt;
                      &lt;/div&gt;
                  &lt;/Col&gt;
                  &lt;Col lg={{span:16,offset:5}} xs={{span:16,offset:5}}&gt;
                      &lt;div className="input-group"&gt;
                          &lt;input type="button" value=" - " id='minus' className="button-minus" onClick={()=&gt;props.addonsCount(addon)}/&gt;
                          &lt;input type="number"  className="quantity-field" id='adQty'/&gt;
                          &lt;input type="button" value="+" className="button-plus" id="plus"/&gt;
                      &lt;/div&gt;
                  &lt;/Col&gt;
                  &lt;Col lg={{span:24}} xs={{span:24}} className='price'&gt;
                      &lt;div className='ad_price'&gt;
                          &lt;h3&gt;Price RS 2000&lt;/h3&gt;
                      &lt;/div&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
  
          &lt;/Card&gt;
          &lt;/Col&gt;)
      }
      const loopVData =()=&gt;{
          for (const key of Object.keys(props.VehcileData)) {
              if(props.VehcileData[key].vid === props.VSelected){
                  props.VehcileData[key].mand.map((addon,i)=&gt;{
                      addonsCard(addon)
                  })
                  props.VehcileData[key].pre.map((addon,i)=&gt;{
                      addonsCard(addon)
                  })
  
                  props.VehcileData[key].optn.map((addon,i)=&gt;{
                      addonsCard(addon)
                  })
              }
          }
      }
      return(
          &lt;div&gt;
              &lt;Collapse defaultActiveKey={['1','2']} &gt;
              &lt;Panel header="SELECT ADDONS" key="1"&gt;
                  &lt;Row &gt;
  
                      {loopVData()}
                      {addonsCards}
                  &lt;/Row&gt;
              &lt;/Panel&gt;
              &lt;/Collapse&gt;
          &lt;/div&gt;
      )
  }
  
  
  const mapStateToProps = (state) =&gt;{
      console.log(state.StepThreeReducer.vehcileData)
      return{
          VehcileData:state.StepThreeReducer.vehcileData,
          VSelected:state.StepThreeReducer.isAmbSel
      }
  }
  export default connect(mapStateToProps,{addOnSelected,addonsCount,updateVehData})(Addons);
  </code></pre>
  
  <p>my <strong>ACTION.js</strong></p>
  
  <pre><code>export function updateVehData(val){
      return function(dispatch,getState){
          if(val.type === 'opt'){
              let VehData = getState().StepThreeReducer.vehcileData;
              let vehID =getState().StepThreeReducer.isAmbSel;            
              for (const key of Object.keys(VehData)) {
                  // console.log(VehData[key])
                  if(VehData[key].vid === vehID){
                      VehData[key].optn.forEach(addon=&gt;{
                          if(addon._id==val._id){
                              addon.selected = !addon.selected;
                              if(addon.selected === true){
                                  addon.qty=1;
                              }else if(addon.selected === true){
                                  addon.qty=0;
                              }
                          }
                      });
  
                  }
              }
              dispatch({type:VEHICLEDATA,payload:VehData})
          }
      }
  }
  </code></pre>
  
  <p>my <strong>Reducer.js</strong></p>
  
  <pre><code>import {ISAMBSEL,ADDONSEL,TOTALPRICE,VEHICLEDATA} from '../actions/types';
  const INITIAL_STATE = {
      isAmbSel:null,
      addonSel:[],
      vehcileData:0,
  
  };
  export default  (state=INITIAL_STATE,action) =&gt; {
      // console.log(action,'reducer')
      switch(action.type) {
          case ISAMBSEL:
              return {...state,isAmbSel:action.payload};
          case ADDONSEL:
              return {...state,addonSel:[...action.payload]}
          case TOTALPRICE:
              return {...state,totalPrice:action.payload}
          case VEHICLEDATA:{
              return {...state,vehcileData:action.payload}}
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>in my <code>mapStateToProps</code> function if I console the <code>state.StepThreeReducer.vehcileData</code> I'm getting updated value but when I console value inside <strong>Addons</strong> component it is not showing the <code>props.VehcileData</code> value even after updating redux state it's not rendering<br> but the same time it's parent component is showing the updated redux state value if I send the updated state value through <strong>parent component</strong> to my <strong>Addons component</strong> then also it's not showing updated value of redux state.<br>
  I think I don't have any problem in <strong>Actions</strong> or <strong>Reducer</strong> because in <code>mapStateToProps</code> it is showing real time redux state value.</p>