求助：Redux Dispatch无响应且无法更新状态（附相关代码）

问题详情 #

• 调用dispatch(selectMail)后Redux状态无更新，Redux DevTools未捕获到任何调度动作
• EmailRow组件接收的props正常渲染，但dispatch后无报错，打印相关值返回undefined
• 路由跳转/mailbody正常执行，但selectedMail状态始终保持初始值null

相关代码 #

EmailRow组件代码 #

import StarBorderIcon from "@mui/icons-material/StarBorder";
import { Checkbox, IconButton } from "@mui/material";
import LabelImportantIcon from "@mui/icons-material/LabelImportant";
import React from "react";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { selectMail } from "./features/mailSlice";

function EmailRow({ title, subject, description, time, id }) {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const selectedMail = () => {
    dispatch(selectMail(title, subject, description, time, id));
    console.log(selectMail.time);
    navigate("/mailbody");
  };

  return (
    <div onClick={selectedMail} className=" ">
      <div className="  cursor-pointer flex flex-row  items-center border shadow-md  mt-2 mr-2">
        <div className="">
          <Checkbox />
          <IconButton>
            <StarBorderIcon className=" text-gray-600" />
          </IconButton>
          <IconButton>
            <LabelImportantIcon className=" text-gray-600" />
          </IconButton>
        </div>
        <h2 className=" font-bold pr-24">{title}</h2>
        <div className=" flex flex-row justify-between flex-1 items-center  pr-2">
          <div className=" flex    flex-row  ">
            <p className="font-bold">{subject} &nbsp;</p>
            <p className=" text-gray-600 text-sm flex items-center">
              - &nbsp;{description}
            </p>
          </div>
          <p className="  text-xs font-bold ">{time}</p>
        </div>
      </div>
    </div>
  );
}

export default EmailRow;

MailSlice代码 #

import { createSlice } from "@reduxjs/toolkit";

export const mailSlice = createSlice({
  name: "mail",
  initialState: { selectedMail: null, sendMessageIsOpen: false },
  reducers: {
    selectMail: (state, action) => {
      state.selectedMail = action.payload;
    },
    sendMessageOpen: (state) => {
      state.sendMessageIsOpen = true;
    },
    sendMessageClose: (state) => {
      state.sendMessageIsOpen = false;
    },
  },
});

export const { sendMessageClose, sendMessageOpen, selectMail } = mailSlice.actions;
export const openSelectedMail = (state) => state.mail.selectedMail;
export const selectSendMessageIsOpen = (state) => state.mail.sendMessageIsOpen;

export default mailSlice.reducer;

Store代码 #

import { configureStore } from "@reduxjs/toolkit";
import mailReducer from "../features/mailSlice";

export const store = configureStore({
  reducer: {
    mail: mailReducer,
  },
});

解决方案 #

问题根源 #

1. Redux Toolkit的action creator默认仅接收单个payload参数，当前代码中dispatch(selectMail(title, subject, description, time, id))仅将title作为payload传入，其余参数被忽略，导致reducer无法获取完整的邮件数据
2. console.log(selectMail.time)属于错误用法：selectMail是action creator函数，并非action对象，因此time属性不存在，返回undefined

修复步骤 #

1. 修改dispatch调用，将参数封装为对象

const selectedMail = () => {
  // 把所有邮件字段封装成一个对象作为payload传入
  dispatch(selectMail({ title, subject, description, time, id }));
  navigate("/mailbody");
};

2. 正确获取状态（可选）
   若需在组件中查看selectedMail状态，使用useSelector钩子：

import { useSelector } from "react-redux";
import { openSelectedMail } from "./features/mailSlice";

// 在组件内部添加
const currentSelectedMail = useSelector(openSelectedMail);
// 可在useEffect中打印状态变化
React.useEffect(() => {
  console.log(currentSelectedMail);
}, [currentSelectedMail]);

3. 确认Provider包裹（必查）
   确保根组件已用Redux的Provider包裹，且传入了正确的store：

import { Provider } from "react-redux";
import { store } from "./store";

function App() {
  return (
    <Provider store={store}>
      {/* 你的路由与组件内容 */}
    </Provider>
  );
}

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