使用Redux Toolkit时报错is not a function该如何解决？

你遇到的报错本质是导入对象不匹配导致调用了不存在的方法：

• 你编写的createSlice文件中，默认导出的是切片的reducer对象，authActions才是包含login方法的action生成器集合，且为具名导出
• Header组件中你用默认导入拿到的是reducer对象，而非action集合，调用authAction.login()自然会触发「不是函数」的报错

1. 修改Header组件的导入语句，将默认导入替换为匹配的具名导入：

// 替换原导入语句
import { authActions } from "../store/Auth";

2. 同步修改dispatch调用处的变量名：

onClick={() => {
  dispatch(authActions.login());
}}

你代码中已经写了console.log("Auth:", authAction);，打开浏览器控制台查看该输出，就能发现你拿到的是reducer对象，并非你预期的action集合，这类导入不匹配的问题都可以通过打印导入对象快速定位。

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