`createAction` 返回的类型不是通过 `ofType` 维护的

如何解决`createAction` 返回的类型不是通过 `ofType` 维护的

我正在开发一款应用，让用户可以从可用零食列表中选择零食。零食是从外部 API 加载的。

我使用 redux-observable 来“侦听”操作，然后分派适当的 API 请求。这是我现有的代码，对有问题的代码行进行了注释：

// actions.ts

import { createAction } from '@reduxjs/toolkit';

import * as Type from './types';

const pfx = '[Snacks]';

export const snackSelect = createAction<Type.Snack['id']>(`${pfx} Select`);

export const snackSelectSuccess = createAction(`${pfx} Select success`);

export const snacksAvailableLoad = createAction(`${pfx} Available load`);

export const snacksAvailableLoadSuccess = createAction<Array<Type.Snack>>(`${pfx} Available load success`);

// epics.ts

import {
  combineEpics,ofType,} from 'redux-observable';
import {
  map,switchMap,} from 'rxjs/operators';

import * as API from '../api';

import * as Actions from './actions';

export default combineEpics(
  action$ => action$.pipe(
    ofType(Actions.snacksAvailableLoad),switchMap(API.snacksGet),map(Actions.snacksAvailableLoadSuccess),),action$ => action$.pipe(
    ofType(Actions.snackSelect),switchMap(({ payload }) => API.snackSelect(payload)),// Error: Property 'payload' does not exist on type 'Action<any>'
    map(Actions.snackSelectSuccess),)

);

payload（应该是目标零食 ID）在我的史诗 switchMap 中不可用。

我可以用 switchMap((action: ReturnType<typeof Actions.snackSelect>) => API.snackSelect(action.payload)) 强制它，但 ReturnType<typeof> 似乎是代码异味和/或相当多的样板。

是否有正确的方法来保留通过 ofType 输入的内容？

解决方法

如果我使用 filter 和 .match，则推断出正确的类型：

export default combineEpics(
  action$ => action$.pipe(
    filter(Actions.snacksAvailableLoad.match),switchMap(API.snacksGet),map(Actions.snacksAvailableLoadSuccess),),action$ => action$.pipe(
    filter(Actions.snackSelect.match),switchMap(({ payload }) => API.snackSelect(payload)),map(Actions.snackSelectSuccess),);

,

我对 redux-observable 不太熟悉，但看起来 ofType 函数中的过滤是基于 Action['type'] 属性的类型。请参阅我对类型函数声明的评论：

export declare function ofType<
  T extends Action,// input action type
  R extends T = T,// output action type
  K extends R['type'] = R['type']       // type name to filter by
>(...key: K[]): (source: Observable<T>) => Observable<R>;

第一个问题是，根据您的 TypeScript 版本，您的操作的 type 属性只是 string 而不是像 "[Snacks] Select success" 这样的文字值。当您使用 ${pfx} Select success 之类的模板创建字符串时，您需要添加 as const 以避免扩展为 string。这在 v4.3.0+（目前处于测试阶段）中不是必需的。

添加 as const 将在没有负载的情况下修复您的两个操作。具有有效载荷的两个仍然是 string。这是因为 createAction 函数具有用于负载 P 和类型 T 的两个通用类型参数。您不能指定一个参数并推断第二个参数。因此，当您为有效负载设置泛型时，您将无法推断字符串文字类型，并且它将回退到默认值 string。

您始终可以手动指定两者：

export const snackSelect = createAction<Type.Snack["id"],`${typeof pfx} Select`>(
  `${pfx} Select` as const
);

或者创建某种辅助函数，因为您在这里似乎有一个一致的模式。

第二个问题是 ofType 能够仅从类型名称 R 推断操作类型 K。如果您的初始操作类型 T 是您特定操作类型的联合，那么这可能会通过提取可分配给 {type: K} 的联合成员自动发生。但是如果 T 是一个通用的 any 动作，那么它就无法区分它。

所以你需要使用某种类型的保护。 Redux-toolkit 操作带有内置的类型保护函数 match。

declare interface BaseActionCreator<P,T extends string,M = never,E = never> {
    type: T;
    match(action: Action<unknown>): action is PayloadAction<P,T,M,E>;
}

...显然这就是您所需要的，这也解决了第一个问题。