反应 useDispatch 不适用于 onClick 事件 - 控制台中没有错误

Question

我正在使用 redux 工具包创建一个 react/redux 应用程序，

当我尝试将 useDispatch 用于点击事件时，它没有触发但也没有错误，我正在使用 redux 工具包来存储此状态并开始使用 useDispatch。

我在下面分享了我的代码，请找到它，如果有人知道它为什么会发生，请分享答案。

我的按钮组件

import React from "react";
import AddIcon from "@material-ui/icons/Add";
import "./sidebar.css";
import { Button, IconButton } from "@material-ui/core";
import SidebarOption from "./SidebarOption";
import InboxIcon from "@material-ui/icons/Inbox";
import StarIcon from "@material-ui/icons/Star";
import AccessTimeIcon from "@material-ui/icons/AccessTime";
import LabelImportantIcon from "@material-ui/icons/LabelImportant";
import NearMeIcon from "@material-ui/icons/NearMe";
import NoteIcon from "@material-ui/icons/Note";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import PersonIcon from "@material-ui/icons/Person";
import DuoIcon from "@material-ui/icons/Duo";
import PhoneIcon from "@material-ui/icons/Phone";
import { useDispatch } from "react-redux";
import { opensendMsg } from "./features/counter/mailSlice";

const Sidebar = () => {
  const dispatch = useDispatch();
  console.log(opensendMsg);
  return (
    <div className="sidebar">
      <div className="compose">
        <Button
          className="compose__button"
          startIcon={<AddIcon fontSize="large" />}
          onClick={() => dispatch(opensendMsg)}
        >
          compose
        </Button>
        <SidebarOption
          Icon={InboxIcon}
          title="inbox"
          number="65"
          selected={true}
        />
        <SidebarOption Icon={StarIcon} title="starred" number="32" />
        <SidebarOption Icon={AccessTimeIcon} title="Snoozed" number="32" />
        <SidebarOption
          Icon={LabelImportantIcon}
          title="Important"
          number="32"
        />
        <SidebarOption Icon={NearMeIcon} title="Sent" number="32" />
        <SidebarOption Icon={NoteIcon} title="Drafts" number="32" />
        <SidebarOption Icon={ExpandMoreIcon} title="More" number="32" />
      </div>

      <div className="sidebar__footer">
        <IconButton>
          <PersonIcon />
        </IconButton>
        <IconButton>
          <DuoIcon />
        </IconButton>
        <IconButton>
          <PhoneIcon />
        </IconButton>
      </div>
    </div>
  );
};

export default Sidebar;

我的 redux 切片

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

export const mailSlice = createSlice({
  name: "mail",
  initialState: {
    value: 0,
    sendMesgOpen: false,
  },
  reducers: {
    opensendMsg: (state) => {
      state.sendMesgOpen = true;
    },
    closesendMsg: (state) => {
      state.sendMesgOpen = false;
    },
  },
});

export const { opensendMsg, closesendMsg } = mailSlice.actions;
export const selectsendMesgOpen = (state) => state.mail.sendMesgOpen;

export default mailSlice.reducer;

我的店铺

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

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

Answer 1

您正在调度函数 opensendMsg，但您需要调用函数 opensendMsg()

请尝试：

onClick={() => dispatch(opensendMsg())}

反应 useDispatch 不适用于 onClick 事件 - 控制台中没有错误

react useDispatch not working for a onClick event - with no errors in console

ecmascript-6

reactjs

redux

react-redux

react-hook-form