React Redux Toolkit调用dispatch报Object(...)不是函数如何解决

问题根因 #

你在Redux Toolkit的createSlice配置中写错了核心字段名，把要求的复数形式reducers写成了单数reducer，导致框架没有自动生成对应的login action creator，所以你导出的login是undefined，调用时自然会抛出「不是函数」的类型错误。

修复方案 #

只需要修改src > futures > users.js里的createSlice配置即可，修改后的完整代码如下：

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

const userSlice = createSlice({
  name: "user",
  initialState: { value: { name: "", age: 0, gender: "" } },
  // 这里把单数reducer改成复数reducers即可
  reducers: {
    login: (state, action) => {
      state.value = action.payload;
    },
  },
});

export const { login } = userSlice.actions;
export default userSlice.reducer;

修改后重新运行项目，点击Login按钮就能正常更新Profile的用户信息了，其余代码无需调整。

内容的提问来源于stack exchange，提问作者PariParia