Question

我按照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"

Answer 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挂钩API的说明，请参见the new "Redux Essentials" Redux core docs tutorial，以及the RTK "Usage with TypeScript" docs page。

Redux + TypeScript +类型安全操作：createReducer / handleAction错误，参数1无效

1 个答案: