在reducer中更改STATE后未调用MapStateToProps

如何解决在reducer中更改STATE后未调用MapStateToProps

numPadHandler（我的减速器）， configureStore（我的商店）， TestRedux（我的组件，尝试使用商店）和我的应用文件。

减速器：

    // store/reducers/numpadreducers/numpadHandler
    
    const initialState = { valueNumPad: "1" }
    
    function numpadHandler(state = initialState,action) {
        let nextState;
        
        switch(action.type) {
            case 'ADD_DIGIT':
                nextState = state;
                nextState.valueNumPad = nextState.valueNumPad + action.value;
    
                console.log("reducer new state : " + state.valueNumPad); 
                return nextState;
    
            default:
                return state;
        }
    }
    
    export default numpadHandler;

商店：

    // store/configureStore

    import { createStore } from 'redux';
    import numpadHandler from './reducers/numpadreducers/numpadHandler';
    
    export default createStore(numpadHandler);

组件：


    // components/TestRedux
    
    import React,{ useState } from "react";
    import { connect } from 'react-redux';
    import Button from './Button';
    
    const TestRedux = (props) => {
        const handleClick = () => {
            console.log("props value numpad : " + props.valueNumPad);
    
            const action = { type: "ADD_DIGIT",value: 5 }
            props.dispatch(action);
        }
        
        return (
            <div>
                <Button onClick={handleClick} />
            </div>
        );
    }
    
    const mapStatetoProps = (state) => {
        console.log("state : " + state.valueNumPad);
        return state
    }
    
    export default connect(mapStatetoProps)(TestRedux);

app：

//...
render() {
        return (
            <Provider store={ Store }>
                <TestRedux />
            </Provider>
       );
}

我不知道为什么当我单击按钮时，reducer的状态正在改变，但是mapStatetoProps函数不再被调用。

页面加载后有我的控制台输出：

state : 1

一键后：

props value numpad : 1
reducer new state : 15

两次单击后：

props value numpad : 1
reducer new state : 155

2次单击后完成控制台输出：

state : 1
props value numpad : 1
reducer new state : 15
props value numpad : 1
reducer new state : 155

所以您可以看到操作正在发生并且reducer状态正在更新，但是组件端没有更新！

你能解释一下为什么吗？

已解决：基于TLadd响应的答案：

我的减速器代码错误，这是编码的好方法：


    case 'ADD_DIGIT':
      const nextState = { 
        ...state,valueNumPad: state.valueNumPad + action.value
      };
      return nextState

解决方法

问题出在减速器上

case 'ADD_DIGIT':
  nextState = state;
  nextState.valueNumPad = nextState.valueNumPad + action.value;
  console.log("reducer new state : " + state.valueNumPad); 
  return nextState;

Redux解决了all state changes are handled immutably的假设。通过选择此选项，它可以在决定应用程序的哪些部分需要重新渲染以响应分派的操作时使用浅层相等性检查。在上述化简器的情况下，您将状态分配给nextState并将新值直接分配给nextState.valueNumPad。即使nextState是一个新引用，它也仍然引用原始状态，结果是原始状态的突变。

正确的做法是：

case 'ADD_DIGIT':
  const nextState = { 
    ...state,valueNumPad: state.valueNumPad + action.value
  };
  return nextState

在这种情况下，我使用扩展符号...state制作状态副本，并覆盖该副本中的valueNumPad值。返回的nextState是一个新对象，我根本没有对旧的state对象进行突变。