CODEWITHSUNDEEP
reactjsreduxecmascript-6react-reduxreact-hook-form
famo
famo

Reputation: 180

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

I am creating a react/redux app using redux toolkit,

when I try to use useDispatch for a click event its not firing but no error also , I am using redux toolkit to store this state and getting using useDispatch.

I have shared my code below , please find it , if anyone knows why its happening do share the answer.

my button component

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;

my redux slice

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;

my store

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

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

Upvotes: 0

Views: 1210

Answers (1)

Tiago
Tiago

Reputation: 378

You are dispatching the function opensendMsg, but you need to call the function opensendMsg()

Please try:

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

Upvotes: 4

Related Questions