Redux + TypeScript + typesafe-actions：createReducer/handleAction 出错，参数 1 无效答案

【问题标题】：Redux + TypeScript + typesafe-actions: error with createReducer/handleAction, Argument 1 is invalidRedux + TypeScript + typesafe-actions：createReducer/handleAction 出错，参数 1 无效
【发布时间】：2021-01-11 06:04:51
【问题描述】：

我按照typesafe-actions 上的教程创建了最简单的 TypeScript/Redux 项目，但是我无法让它工作。我不断收到错误，

Error: Argument 1 is invalid, it should be an action-creator instance from "typesafe-actions" or action type of type: string | symbol

当我尝试访问该页面时（Typescript 很高兴，代码转换正常）

这是我的 reducer.ts（单个 reducer，应该只用 newData 覆盖存储）。这似乎是错误的来源，handleAction 的第二个参数

import { setData } from "actions";
import { createReducer } from "typesafe-actions";

const dataReducer = createReducer({}).handleAction(
  setData,
  (state, action) => action.payload.newData
);

export default dataReducer;

这是 actions.js 文件（我尝试使用 action 和 createAction，没有区别）：

import { action, createAction } from "typesafe-actions";
import { SET_DATA } from "constants";

export const setData = (newData: string) => action(SET_DATA, { newData });

constants.ts 是一个简单的单行， export const SET_DATA = "SET_DATA";

按照教程，我尝试在我的 Reducer 代码中使用花哨的 "type-free" syntax，所以我还有一个 types.d.ts 文件

// types.d.ts
import { StateType, ActionType } from "typesafe-actions";

export type RootAction = ActionType<typeof import("./actions").default>;

declare module "typesafe-actions" {
  interface Types {
    RootAction: RootAction;
  }
}

据我所知，这应该适用于一个非常简单的示例。我到底做错了什么？

版本仅供参考：

"react": "^16.13.1",
"redux": "^4.0.5",
"react-redux": "^7.2.1",
"typescript": "~3.7.2"
"typesafe-actions": "^5.1.0"

【问题讨论】：

标签： reactjs typescript redux typesafe-actions

【解决方案1】：

虽然这并未严格回答您的问题：

我们特别推荐使用our official Redux Toolkit package，而不是typesafe-actions。 RTK 已经用 TS 编写，在 TS 应用中运行良好。

作为其中的一部分，RTK 将根据您定义的减速器从 createSlice 函数生成正确类型的动作创建器。

您可以使用our Redux+TS template for Create-React-App 快速建立一个全新的项目，它已经配置了RTK 以设置您的商店并输入您的RootState。

此外，我们建议不要尝试遵循typesafe-actions 文档中列出的一些模式，例如尝试定义所有可能的操作类型的联合。这种方法确实没有什么好处。

有关如何正确使用 Redux Toolkit 和 React-Redux hooks API 的说明，请参阅 the new "Redux Essentials" Redux core docs tutorial，以及 the RTK "Usage with TypeScript" docs page。

【讨论】：