javascript 调度未更新状态或调度任何内容

pbpqsu0x  于 2023-05-27  发布在  Java
关注(0)|答案(1)|浏览(138)

Dispatch不更新状态或调度任何内容。我已经检查了相同的是redux dev-tools,也试图控制它的值,但给出undefined。尝试使用 prop 从电子邮件行功能,这是工作正常的预期。

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;

下面的商店附

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

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

它不会给予任何类型的错误,只是不更新状态。

hs1rzwqc

hs1rzwqc1#

我猜你应该使用state.selectedMail而不是state.selectMail

reducers: {
  selectMail: (state, action) => {
    state.selectedMail = action.payload;
  },
  ...
},

相关问题