Redux中DevTools显示状态更新但组件获取仍为初始值的问题

点击「Yes」按钮通过dispatch更新Redux状态后，Redux DevTools显示状态已更新，但点击「No」按钮时，组件内获取的状态仍是初始值。

场景复现 #

页面包含「Yes」和「No」两个按钮：

1. 点击「Yes」触发dispatch更新modal状态，Redux DevTools确认状态已更新
2. 点击「No」时，打印的状态仍为初始值

相关代码 #

reducer.js #

import { SET_MODAL_DETAILS, CLEAR_MODAL_DETAILS } from "../actions/types";

const initialState = {
  modalInfo: {
    isOpen: false,
    modalName: "",
    title: "",
    content: "",          
  },
};

const modal = (state = initialState, action) => {
  const { type, payload } = action;

  switch (type) {
    case SET_MODAL_DETAILS:
      return { ...state, modalInfo: payload };

    case CLEAR_MODAL_DETAILS:
      return { ...state, modalInfo: null };

    default:
      return state;
  }
};
export default modal;

action.js #

import {SET_MODAL_DETAILS, CLEAR_MODAL_DETAILS} from "./types";

export const setModalDetails = (payload) => ({
    type: SET_MODAL_DETAILS,
    payload: payload,
});

export const clearModalDetails = () => ({
    type: CLEAR_MODAL_DETAILS,
});

store.js #

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
import checkTokenExpiration from "./checkToken";

const middleware = [thunk];

const store = createStore(
  rootReducer,
  process.env.NODE_ENV === "production"
    ? applyMiddleware(...middleware, checkTokenExpiration)
    : composeWithDevTools(applyMiddleware(...middleware, checkTokenExpiration))
);

export default store;

student.js #

import { connect } from "react-redux";
import Button from "@mui/material/Button";
import { setModalDetails } from "../../redux/actions/modal";

const Student = ({ setModalDetails, modal: { modalInfo } }) => {
  const handleYesButton = () => {
    setModalDetails({
      ...modalInfo,
      isOpen: true,
      title: "Confirm Modal",
      content: "Do you want to change status?",
      modalName: "confirmModal",
    });
  };

  const handleNoButton = () => {
    console.log(modalInfo); // 返回初始状态，而非更新后的值
  };

  return (
    <>
      <Button onClick={handleYesButton}>Yes</Button>
      <Button onClick={handleNoButton}>No</Button>
    </>
  );
};

const mapStateToProps = (state) => ({
  modal: state.modal,
});

export default connect(mapStateToProps, { setModalDetails })(Student);

解决方案 #

核心原因 #

组件通过connect映射的modalInfo被事件处理函数的闭包捕获，当Redux状态更新后，组件若未正确触发重新渲染，事件函数内仍会引用旧的modalInfo值；此外，使用connect的函数组件可能存在状态订阅不及时的情况。

修复步骤 #

1. 改用useSelector和useDispatch（推荐）
   替换connect为Redux Hooks，确保每次获取的都是最新状态：

   import { useSelector, useDispatch } from "react-redux";
   import Button from "@mui/material/Button";
   import { setModalDetails } from "../../redux/actions/modal";
   
   const Student = () => {
     // 直接订阅最新的modalInfo状态
     const modalInfo = useSelector(state => state.modal.modalInfo);
     const dispatch = useDispatch();
   
     const handleYesButton = () => {
       dispatch(setModalDetails({
         ...modalInfo,
         isOpen: true,
         title: "Confirm Modal",
         content: "Do you want to change status?",
         modalName: "confirmModal",
       }));
     };
   
     const handleNoButton = () => {
       console.log(modalInfo); // 现在会输出最新状态
     };
   
     return (
       <>
         <Button onClick={handleYesButton}>Yes</Button>
         <Button onClick={handleNoButton}>No</Button>
       </>
     );
   };
   
   export default Student;
   

2. 检查Root Reducer配置
   确保rootReducer正确合并了modal reducer，否则state.modal不存在，组件无法获取状态：

   // reducers/index.js
   import { combineReducers } from 'redux';
   import modal from './modal';
   
   export default combineReducers({
     modal, // 确保modal reducer被正确合并
   });
   

3. 验证中间件是否正常工作
   检查checkTokenExpiration中间件是否调用了next(action)，否则action无法传递到reducer：

   const checkTokenExpiration = store => next => action => {
     // 你的业务逻辑
     return next(action); // 必须调用此方法让action继续流转
   };
   

4. 确保组件被Provider包裹
   根组件必须用Provider包裹，否则Redux状态无法传递到子组件：

   // App.js
   import { Provider } from 'react-redux';
   import store from './redux/store';
   import Student from './Student';
   
   function App() {
     return (
       <Provider store={store}>
         <Student />
       </Provider>
     );
   }
   

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