Not getting updated state from redux store when the state is update

Question

When I update counter 1 it increases but the component is not getting the updated state. After the state is updated the counter didn't show updated number. But if I go to another component and back to the counter component then I get the updated state. Here is the counter page-

 import React, { Component } from 'react'
import {connect} from 'react-redux'
import {increaseXaomi} from '../../store/actions/counterAction';

class Counter extends Component {
    increaseXaomi =  ()=>{
        this.props.increaseXaomi();
    }
    render() {
        console.log(this.props)
        return (
            <div className="container">
                <div className="row">
                    <p>Xaomi <strong>{this.props.xaomi}</strong></p>
                    <p>Iphone <strong>{this.props.iphone}</strong></p>
                    <p>Huai <strong>{this.props.huai}</strong></p>
                    <button className="btn" onClick={this.increaseXaomi}>Increase Xaomi</button>
                </div>
            </div>
        )
    }
}
const mapStateToProps = ({counter})=>{
    return counter;
}
const mapDispatchToProps = (dispatch)=>{
    return {
        increaseXaomi: ()=>{
            increaseXaomi(1)(dispatch)
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Counter);

Counter action is called when the "increaseXaomi" method is called from the component.

export function increaseXaomi(num=1){
    return (dispatch)=>{
        dispatch({
            type:'INCREASE_XAOMI',
            payload:num
        })
    }
}

Counter Reducer get the action type and counter value for increasing the counter. It return updated state.

let initState = {
    xaomi:0,
    iphone:0,
    huai:0
}

function counterReducer(state=initState,action){
    switch(action.type){
        case 'INCREASE_XAOMI':
            state.xaomi+=action.payload
            return state;
        default:
            return state;
    }
}

export default counterReducer;

Answer 1

When you are using redux you want to make sure you are not mutating the state, you need to create a new state object (a shallow copy). Refer to this link for more info on mutations and update patterns in redux.

Your code should be:

let initState = {
    xaomi:0,
    iphone:0,
    huai:0
}

function counterReducer(state=initState,action){
    switch(action.type){
        case 'INCREASE_XAOMI':
            return { ...state, xaomi: state.xaomi + action.payload };
        default:
            return state;
    }
}

export default counterReducer;

Answer 2

You are mutating the state on the reducer.

You should always return a new instance of your state.

function counterReducer(state=initState,action){
   switch(action.type){
      case 'INCREASE_XAOMI':
          return { ...state, xaomi: state.xaomi + action.payload };
      default:
          return state;
   }
}