Redux状态更新后console.log显示正常但React组件渲染未更新如何解决？

问题根源 #

你的Redux store更新逻辑本身没有问题，console能打印最新值也验证了store数据已经正确更新。页面不更新的核心原因是：React 组件默认只会在自身state或传入props发生变更时触发重新渲染。你当前的Counter组件没有监听Redux store的变化，store更新后不会主动通知组件重新执行render函数，所以页面展示的始终是初始渲染时拿到的旧值。

解决方法 #

方案1：手动订阅store变化（无需额外依赖） #

在组件挂载时注册store的订阅回调，store每次更新都主动触发组件重渲染，同时在组件卸载时取消订阅避免内存泄漏。修改后的完整代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import {configureStore} from '@reduxjs/toolkit';
// 原代码里的import App是无用导入，可直接删除
var initialState = {value: 0};
function counterReducer(state=initialState,action) {
    if(action.type === 'counter/increment') {
        return { 
            ...state,
            value: state.value + 1
        }
    } else {
        return state;
    }
}
const store = configureStore({reducer: counterReducer});
store.dispatch({type: 'counter/increment'});
class Counter extends React.Component {
    // 组件挂载时订阅store变化
    componentDidMount() {
        this.unsubscribe = store.subscribe(() => {
            // store更新时触发组件重渲染
            this.forceUpdate();
        })
    }
    // 组件卸载时取消订阅，防止内存泄漏
    componentWillUnmount() {
        this.unsubscribe();
    }
    HelloWorld = () => {
        store.dispatch({type: 'counter/increment'});
        console.log(store.getState().value);
    }
    render() {
        return (
            <div>
            <p>{store.getState().value}</p>
            <button onClick={this.HelloWorld}>Add</button>
            </div>
        );
    }
}
ReactDOM.render(<Counter />,document.getElementById('root'));

方案2：使用官方react-redux绑定库（生产环境推荐） #

这是Redux生态的标准用法，无需手动处理订阅逻辑，性能和可维护性更好：

1. 先安装依赖：npm install react-redux
2. 修改代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import {configureStore} from '@reduxjs/toolkit';
import { Provider, connect } from 'react-redux';

var initialState = {value: 0};
function counterReducer(state=initialState,action) {
    if(action.type === 'counter/increment') {
        return { 
            ...state,
            value: state.value + 1
        }
    } else {
        return state;
    }
}
const store = configureStore({reducer: counterReducer});
store.dispatch({type: 'counter/increment'});

class Counter extends React.Component {
    HelloWorld = () => {
        this.props.increment();
        console.log(this.props.value);
    }
    render() {
        return (
            <div>
            <p>{this.props.value}</p>
            <button onClick={this.HelloWorld}>Add</button>
            </div>
        );
    }
}
// 将store数据映射到组件props
const mapStateToProps = (state) => ({
    value: state.value
})
// 将dispatch方法映射到组件props
const mapDispatchToProps = (dispatch) => ({
    increment: () => dispatch({type: 'counter/increment'})
})
// 用connect高阶组件包裹Counter
const WrappedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);

// 根组件用Provider包裹，传入store
ReactDOM.render(
    <Provider store={store}>
        <WrappedCounter />
    </Provider>,
    document.getElementById('root')
);

内容的提问来源于stack exchange，提问作者user2134128