Не обновляется состояние из хранилища приставки, когда состояние обновляется

Question

Когда я обновляю счетчик 1, он увеличивается, но компонент не получает обновленное состояние. После обновления состояния счетчик не показывал обновленный номер. Но если я go перехожу к другому компоненту и возвращаюсь к компоненту счетчика, я получаю обновленное состояние. Вот страница счетчика -

 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);

Действие счетчика вызывается, когда из компонента вызывается метод увеличенияXaomi.

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

Счетчик-редуктор получает тип действия и значение счетчика для увеличения счетчика. Возвращает обновленное состояние.

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

Когда вы используете избыточность, вы хотите убедиться, что вы не изменяете состояние, вам нужно создать новый объект состояния (поверхностная копия). Обратитесь к этой ссылке для получения дополнительной информации о мутациях и шаблонах обновления в приставке.

Ваш код должен быть:

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

Вы изменяете состояние редуктора.

Вы всегда должны возвращать новый экземпляр своего состояния.

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