如何使 typesafe-actions 与 redux-logic 转换一起使用？答案

【问题标题】：How to make typesafe-actions work with redux-logic transform?如何使 typesafe-actions 与 redux-logic 转换一起使用？
【发布时间】：2019-09-16 09:56:30
【问题描述】：

Redux-logic 提供了一种称为 transform 的方法，它允许在 action 到达 reducer 之前对其进行转换。这对各种情况都有帮助。通常我想调度一个只有我的用户输入的动作，有时我的减速器需要支持数据才能执行状态更新。

所以，我可以在 redux-logic 转换过程中执行此操作，但这似乎与 typesafe-actions（我也在使用）冲突。我如何告诉 typescript 我的动作在到达减速器之前已经被转换了？

假设我使用{ userName: string } 之类的有效负载进行调度，但我的转换过程添加了一个属性，所以我得到了{ userName: 'John Doe', recordId: 9 }。

【问题讨论】：

标签： reactjs typescript redux redux-logic typesafe-actions

【解决方案1】：

有一个关于标准动作类型的包 https://github.com/redux-utilities/flux-standard-action

redux-logic 提供https://github.com/jeffbski/redux-logic/blob/master/definitions/action.d.ts，这是我们需要使用的操作接口

【讨论】：

【解决方案2】：

我是 typescript 的新手，但意识到我知道如何解决这个问题。

在reducer中我们通常导入action类型，它是这样的：

// actions.ts
import { action } from 'typesafe-actions';
import actionTypes from './actionTypes';

export const someAction = (data) = action(
  actionTypes.SOME_ACTION_TYPE,
  { data },
);

// reducer.ts
import { ActionType } from 'typesafe-actions';
import { StateSlice } from './types';
import * as actions from './actions';

const initialState: StateSlice = { ... };

const reducer = (state = initialState, action: ActionType<typeof actions>): StateSlice => {
  ...
};

因此，要更新它以接受已被 redux-logic 中间件修改的操作，我们必须告诉 typescript 该类型已被扩展。它是这样的：

// actions.ts
import { action } from 'typesafe-actions';
import actionTypes from './actionTypes';

export const someAction = (data) = action(
  actionTypes.SOME_ACTION_TYPE,
  { data },
);

// reducer.ts
import { ActionType } from 'typesafe-actions';
import { StateSlice, SOME_TYPE } from './types';
import * as actions from './actions';

type OriginalAction = ActionType<typeof actions.someAction>;
interface MutatedAction1 extends OriginalAction {
  payload: OriginalAction['payload'] & {
    thingWeAddedInReduxLogic: SOME_TYPE;
  };
}

// repeat for other actions, then use a union type like this

type MutatedActionType = MutatedAction1 | MutatedAction2 | ... ;

const initialState: StateSlice = { ... };

const reducer = (state = initialState, action: MutatedActionType): StateSlice => {
  ...
};

这是我能够制作的真实代码的缩写版本。希望这对某人有所帮助。

【讨论】：