title: I am making a real time betting app and My redux state is updating but my ui is not affecting Can anyone help me with the code
body: <p>I am developing real time sportsbook using MERN stack and redis as memory db.. Everything seems right except react-redux not passing state to components as they are updated. I can see the nextstate clearly getting latest data in the console/ redux logger..</p>
  <p>Here is the component reducer file..</p>
  <pre><code>import ActionTypes from './betslip.types';
      import { calculateTotalReturn } from './betslip.utils';
      
      const INITIAL_STATE = {
          bets: [],
          updateBet: true,
          updatedGame: true,
          betType:'single',
          totalStake:0,
          singleTotalReturn:0,
          multiTotalReturn:0,
          systemTotalReturn:0
      }
      
      export const betslipReducer = (state = INITIAL_STATE, action) =&gt; {
          switch(action.type) {
              case ActionTypes.SET_UPDATE_BET:
                return {
                      ...state,
                      updateBet: action.value
                  };
              case ActionTypes.SET_BET_TYPE:
                  return {
                          ...state,
                          betType: action.value
                      };
                  case ActionTypes.UPDATED_GAMES:
                      return {
                            ...state,
                            updatedGame: !state.updatedGame
                        };
              case ActionTypes.SET_TOTAL_STAKE:
                  return {
                          ...state,
                          totalStake: action.value 
                      };
              case ActionTypes.PUT_BET:
                  return {
                          ...state,
                          bets: [action.value, ...state.bets]
                      };
              case ActionTypes.UPDATE_BET_ODD:
                  var betsOddsCopy = state.bets;
                  var indexOdds = betsOddsCopy.findIndex(n =&gt; n._id === action.betId);
                  betsOddsCopy[indexOdds].odds = action.value;
                  return {
                          ...state,
                          bets: betsOddsCopy
                      };
              case ActionTypes.UPDATE_BET_STAKE:
                  var betsStakeCopy = state.bets;
                  var indexStake = betsStakeCopy.findIndex(n =&gt; n._id === action.betId);
                  betsStakeCopy[indexStake].stake = action.value;
                  return {
                          ...state,
                          bets: betsStakeCopy
                      };
              case ActionTypes.DELETE_BET:
                  var betsCopy = state.bets;
                  const newBets = betsCopy.filter(b =&gt; b._id != action.betId)
                  return {
                          ...state,
                          bets: newBets
                      };
              case ActionTypes.CALCULATE_TOTAL_RETURN:
                  return calculateTotalReturn(state);
          
              default:
                  return state;
            }
      }
  </code></pre>
  <p>The bets property in this file is not updating but betslip.bets is updating</p>
  <pre><code>import React, { useState } from 'react';
      import { connect } from 'react-redux';
      
      import { setUpdateBet, calculateTotalReturn, setBetType, setTotalStake, updateBetStake } from '../../redux/betslip/betslip.actions';
      
      import Bet from '../bet/bet.component';
      
      import './BetSlip.css';
      
      //bets, updateBet, betType, totalStake, singleTotalReturn, multiTotalReturn, systemTotalReturn,
      
      const BetSlip = ({bets, updateBet, betType, totalStake, singleTotalReturn, multiTotalReturn, systemTotalReturn, setUpdateBet, setBetType, setBetStake, setTotalStake, calculateTotalReturn }) =&gt;  { 
      
          //const bets = store.getState().betslip.bets;
          //console.log(betslip);
      
          const [collapsed, setCollapsed] = useState(bets.length &gt; 1 ? true : false);
      
          const handleStakeTypeChange = (e) =&gt; {
              if(e.target.dataset.type == 'multi' &amp;&amp; bets.length &gt; 8){
                  return;
              } else if(e.target.dataset.type == 'system' &amp;&amp; bets.length != 3){ 
                  return;
              }
              setBetType(e.target.dataset.type) 
              calculateTotalReturn();
          }
      
          const handleOpen = () =&gt; {
              setCollapsed(!collapsed);
          }
      
          const handleUpdateBet = (e) =&gt; {
              if(e.target.checked){
                  setUpdateBet(true);
              } else{
                  setUpdateBet(false);
              }
          }
      
          const handleStakeChange = (e) =&gt; {
                  if(betType == 'single'){
                      setBetStake(bets[0]._id, e.target.value)
                      calculateTotalReturn();
                  } else {
                      setTotalStake(e.target.value);
                      calculateTotalReturn();
                  }
      
                  
                  //console.logbets);
          }
      
      
      
          React.useEffect(() =&gt; {
              console.log('bet changed')
              if(bets.length &lt;= 1){
                  setBetType('single')
                  calculateTotalReturn();
              }
              calculateTotalReturn();
          },[bets]);
      
          // setInterval(() =&gt; {
          //     var total = 0;
          //     bets.forEach(bet =&gt; {
          //         total =+ bet.stake;
          //     })
          //     setTotalBetPrice(total);
          // }, 5000);
         
          var totalOdds;
      
          if(betType == 'single'){
              totalOdds = 0;
              bets.forEach(bet =&gt; {
                  if( bet.odds != 'suspended'){
                      totalOdds += bet.odds;
                  }
                  //console.log('Hii');
              })
          } else if(betType == 'multi'){
              totalOdds = 1;
              bets.forEach(bet =&gt; {
                  if( bet.odds != 'suspended'){
                      totalOdds *= parseFloat(bet.odds);
                  }
              })
          } else {
              totalOdds = 0;
          }
      
          //console.log(updatedGames)
      
      
          return &lt;div className='betslip__container'&gt;
              &lt;div className='betslip__badge' onClick={handleOpen}&gt;
                  &lt;span&gt;Bet Slip ({bets.length})&lt;/span&gt;
                  {collapsed ? &lt;span&gt;&lt;i className=&quot;fa fa-chevron-up&quot; /&gt;&lt;/span&gt; : &lt;span&gt;&lt;i className=&quot;fa fa-chevron-down&quot; /&gt;&lt;/span&gt;}
              &lt;/div&gt;
      
                  {(collapsed == false &amp;&amp; bets.length &gt; 1) &amp;&amp; &lt;div className='betslip__stakeType'&gt;
                      &lt;div className={`betslip__stakeType__item ${betType == 'single' &amp;&amp; &quot;active&quot;}`} onClick={handleStakeTypeChange} data-type='single'&gt;
                          Single
                      &lt;/div&gt;
                      {bets.length &lt; 9 &amp;&amp; &lt;div className={`betslip__stakeType__item ${betType == 'multi' &amp;&amp; &quot;active&quot;}`} onClick={handleStakeTypeChange} data-type='multi'&gt;
                          Multi/Parlay
                      &lt;/div&gt;}
                      {bets.length == 3 &amp;&amp; &lt;div className={`betslip__stakeType__item ${betType == 'system' &amp;&amp; &quot;active&quot;}`} onClick={handleStakeTypeChange} data-type='system'&gt;
                          System 2/3
                      &lt;/div&gt;}
                  &lt;/div&gt; }
                  
                  
                  &lt;div className='betslip__body__container'&gt;
                          {
                              collapsed == false &amp;&amp; bets.map(bet =&gt; (
                                  &lt;Bet 
                                      key={bet._id} 
                                      id={bet._id} 
                                      title={bet.optionName} 
                                      odds={bet.odds} category={bet.category} 
                                      teams={bet.teams}
                                      stake={bet.stake} 
                                      stakeType={betType} /&gt;
                              ))
                          }
                  &lt;/div&gt;
                  
                  
              {!collapsed &amp;&amp; &lt;div className=&quot;betslip__footer&quot;&gt;
                  {((betType == 'multi' || betType == 'system') || bets.length &lt; 2) &amp;&amp; &lt;div className=&quot;betslip__stake&quot;&gt;
                      &lt;input type='number' className='betslip__stake__input' placeholder='Stake' value={betType == 'single' ? (bets[0].stake &gt; 0 ? bets[0].stake : '') : (totalStake &gt; 0 ? totalStake : '')} onChange={handleStakeChange} /&gt;
                  &lt;/div&gt;}
                   &lt;button className=&quot;betslip__btn__saving&quot;&gt;
                      &lt;span className=&quot;betslip__btn__saving__text&quot;&gt;Place Bet&lt;/span&gt;
                      &lt;span className='totals'&gt;
                          &lt;span className='totals__text'&gt;
                              Total Odds: {parseFloat(totalOdds).toFixed(3)}
                          &lt;/span&gt;
                          {betType == 'single' &amp;&amp; &lt;span&gt;Total Return: {singleTotalReturn &gt; 0 ? parseFloat(singleTotalReturn).toFixed(2) : singleTotalReturn}&lt;/span&gt;}
                          {betType == 'multi' &amp;&amp; &lt;span&gt;Total Return: {multiTotalReturn &gt; 0 ? parseFloat(multiTotalReturn).toFixed(2) : multiTotalReturn}&lt;/span&gt;}
                          {betType == 'system' &amp;&amp; &lt;span&gt;Total Return: {systemTotalReturn &gt; 0 ? parseFloat(systemTotalReturn).toFixed(2) : systemTotalReturn}&lt;/span&gt;}
                          
                      &lt;/span&gt; 
                      
                  &lt;/button&gt;
              &lt;/div&gt;}
              {!collapsed &amp;&amp; &lt;div className='betslip__badge'&gt;
               &lt;div className=&quot;form-check&quot;&gt;
                  {updateBet 
                  ? 
                  &lt;input className=&quot;form-check-input&quot; type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;flexCheckDefault&quot; onClick={handleUpdateBet} defaultChecked /&gt;
                  :
                  &lt;input className=&quot;form-check-input&quot; type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;flexCheckDefault&quot; onClick={handleUpdateBet} /&gt;
                  }
                  &lt;label className=&quot;form-check-label&quot; htmlFor=&quot;flexCheckDefault&quot;&gt;
                      Accept Change
                  &lt;/label&gt;
                  &lt;/div&gt; 
              &lt;/div&gt;}
          &lt;/div&gt; 
      }
      
      const mapStateToProps = state =&gt; ({
          betType: state.betslip.betType,
          updateBet: state.betslip.updateBet,
          totalStake: state.betslip.totalStake,
          singleTotalReturn: state.betslip.singleTotalReturn,
          multiTotalReturn: state.betslip.multiTotalReturn,
          systemTotalReturn: state.betslip.systemTotalReturn,
          bets: state.betslip.bets
      })
      
      const mapDispatchToProps = dispatch =&gt; ({
          setUpdateBet: value =&gt; dispatch(setUpdateBet(value)),
          setBetType: value =&gt; dispatch(setBetType(value)),
          setTotalStake: value =&gt; dispatch(setTotalStake(value)),
          setBetStake: (id, value) =&gt; dispatch(updateBetStake(id, value)),
          calculateTotalReturn: () =&gt; dispatch(calculateTotalReturn())
      })
      
      export default connect(mapStateToProps, mapDispatchToProps)(BetSlip);
  
  
  
      
  </code></pre>