react redux toolkit- action in dispatch returns err: Object(...) is not a function at onClick

Question

I'm learning redux toolkit for reactjs. I was watching a toturial on youtube and do everything on it step by step. I write a app witch has 2 components : Profile and Login! when you click an the button of Login component, the profile info should changes. but now, when I press that button, I get this error:

Login.js:12 Uncaught TypeError: Object(...) is not a function at onClick (Login.js:12) I want to know what is my mistake?!

index.js:

import App from "./App";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import userReducer from './futures/users'

const store = configureStore({
  reducer: {
    user : userReducer
  },
});

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

src > futures > users.js:

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

const userSlice = createSlice({
  name: "user",
  initialState: { value: { name: "", age: 0, gender: "" } },
  reducer: {
    login: (state, action) => {
      state.value = action.payload;
    },
  },
});

export const { login } = userSlice.actions;
console.log(login); //it returned undefined

export default userSlice.reducer;

Profile.js: (It works well)

import React from "react";
import { useSelector } from "react-redux";

const Profile = () => {
    const user = useSelector((state)=> state.user.value);
  return (
    <div>
      <h1>Profile</h1>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>Gender: {user.gender}</p>
    </div>
  );
};

export default Profile;

Login.js:

import React from "react";
import { useDispatch } from "react-redux";
import { login } from "../futures/users";

const Login = () => {
  const dispatch = useDispatch();

  return (
    <div>
      <button
        onClick={() =>{
            dispatch(login({ name: "Paria", age: 21, gender: "demigirl" }));
        }}
      >
        Login
      </button>
    </div>
  );
};

export default Login;

and I added these components (Login and Profile) in return function of App.js.

Ryan Le · Accepted Answer · 2021-08-29 10:11:38Z

2

It should be reducers (with an s) not reducer

const userSlice = createSlice({
  name: "user",
  initialState: { value: { name: "", age: 0, gender: "" } },
  reducers: {  // <-- Change to `reducers` here, mate
    login: (state, action) => {
      state.value = action.payload;
    },
  },
});

answered Aug 29, 2021 at 10:11

Ryan Le

8,5181 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yashar98 · Accepted Answer · 2022-08-17 20:03:05Z

0

i have same error. just add '/react' for importing from query. importing is different in react.

import { createApi } from '@reduxjs/toolkit/query' //not use this

/* React-specific entry point that automatically generates
   hooks corresponding to the defined endpoints */
import { createApi } from '@reduxjs/toolkit/query/react' //use this one

answered Aug 17, 2022 at 20:03

Yashar98

1

1 Comment

treckstar Over a year ago

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review

Collectives™ on Stack Overflow

react redux toolkit- action in dispatch returns err: Object(...) is not a function at onClick

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related