时间戳

首页 > 解决方案 > Redux + TypeScript + typesafe-actions：createReducer/handleAction 出错，参数 1 无效

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

问题描述

我按照关于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文件（我尝试同时使用actionand 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 代码中使用花哨的“无类型”语法，所以我也有一个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"

标签： reactjstypescriptreduxtypesafe-actions

解决方案

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

我们特别推荐使用我们的官方 Redux Toolkit 包，而不是typesafe-actions. RTK 已经用 TS 编写，并且在 TS 应用程序中运行良好。

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

您可以使用我们用于 Create-React-App 的 Redux+TS 模板快速设置一个全新的项目，该模板随附的 RTK 已经配置为设置您的商店并输入您的RootState.

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

有关如何正确使用 Redux Toolkit 和 React-Redux hooks API 的说明，请参阅新的“Redux Essentials”Redux 核心文档教程，以及RTK“Usage with TypeScript”文档页面。

推荐阅读