react redux toolkit- action in dispatch returns err: Object(...) 不是 onClick 的函数

Question

我正在学习用于 reactjs 的 redux 工具包。我在 youtube 上观看了一个 toturial，并逐步完成了所有内容。我写了一个应用程序有 2 个组件：配置文件和登录！当您单击登录组件的按钮时，配置文件信息应该会更改。但是现在，当我按下那个按钮时，我得到了这个错误：

Login.js:12 未捕获类型错误：对象 (...) 不是函数在点击 (Login.js:12) 我想知道我的错误是什么？！

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;

并且我在 App.js 的 return 功能中添加了这些组件（登录和配置文件）。

Answer 1

It 应该是 reducers（带有 s）而不是 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;
    },
  },
});

react redux toolkit- action in dispatch returns err: Object(...) 不是 onClick 的函数

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

reactjs

react-redux

react-hooks

redux-toolkit