typescript - 如何使用不同于分派(dispatch)类型的返回类型键入提示 redux 分派(dispatch)？

Question

我想使用不同于调度类型的类型提示 Action 创建者。

我已经尝试使用这两种类型对 ThunkResult 进行类型提示，但这并不理想。

// types.ts
interface AppListAction extends FetchAction {
  type: typeof APP_LIST,
  [FETCH]: {},
}

interface AppListSuccessAction extends FetchResponseAction {
  type: typeof APP_LIST_SUCCESS,
  response: Array<ListModel>
}

export type AppResponseActions =
  AppListSuccessAction

export type AppActions =
  AppListAction
  | AppResponseActions


// actions.ts
export const loadListCreator = (): AppActions => ({
  type: C_LIST,
  [FETCH]: {},
})

export const loadList = (): ThunkResult<AppResponseActions> => (dispatch: ThunkDispatcher) => dispatch(loadListCreator())

我预计没有错误，但我收到了:

TypeScript 错误:类型“AppActions”不可分配给类型“AppResponseActions”。 类型“AppListAction”不可分配给类型“AppResponseActions”。 “AppListAction”类型中缺少属性“response”，但在“AppListSuccessAction”类型中是必需的。 TS2322

Answer 1

为了使您的代码可编译，我做了以下假设

import { ThunkAction, ThunkDispatch } from 'redux-thunk';

const FETCH = 'fetch';

interface FetchAction {
    [FETCH]: object;
}

interface FetchResponseAction {
    prop2: string;
}

const APP_LIST = 'APP_LIST';
const APP_LIST_SUCCESS = 'APP_LIST_SUCCESS';

interface ListModel {
    prop3: string;
}

在你的代码之后

type ThunkResult<R> = ThunkAction<R, State, undefined, AppActions>;
type ThunkDispatcher = ThunkDispatch<State, undefined, AppActions>;

给定上述假设，您的代码可以通过以下修改编译

export const loadList = (): ThunkResult<AppActions> => (dispatch: ThunkDispatcher) => dispatch(loadListCreator());

ThunkResult<AppActions>应该有 R = AppActions 的类型. R是 ThunkResult 类型函数的返回值.在 Redux-Thunk 源代码中 ThunkAction 定义如下

export type ThunkAction<
    TReturnType,
    TState,
    TExtraThunkArg,
    TBasicAction extends Action
> = (
    dispatch: ThunkDispatch<TState, TExtraThunkArg, TBasicAction>,
    getState: () => TState,
    extraArgument: TExtraThunkArg
) => TReturnType;

所以 ThunkAction (ThunkResult 所基于的)是一个返回类型为 TReturnType 的函数。 .

然后你尝试制作loadlist类型 ThunkResult<>等于 (dispatch: ThunkDispatcher) => dispatch(loadListCreator()) .本质上它也是函数，但返回 dispatch 的结果称呼。 dispatch类型为 ThunkDispatcher和 from source它有类型

export interface ThunkDispatch<
    TState,
    TExtraThunkArg,
    TBasicAction extends Action
> {
    <TReturnType>(
        thunkAction: ThunkAction<TReturnType, TState, TExtraThunkArg, TBasicAction>
    ): TReturnType;
    <A extends TBasicAction>(action: A): A;
}

所以它是一个重载函数，使用一个类型为 A 的函数。并返回 A 类型的结果.作为dispatch被调用，结果为 loadListCreator()返回 AppActions 类型结果的调用, A推断为 AppActions .

原始代码未正确编译，因为您要分配函数返回 AppActions函数返回 AppResponseActions . AppActions是联合类型，可以是AppResponseActions或 AppListAction .如果是 AppListAction它不能分配给 AppResponseActions .

我想我已经描述清楚了:-)

从实践的角度来看，您的代码有点过于复杂。

考虑以这种方式简化它。

1. 继承Action类型的所有 Action

   import { Action } from 'redux';
   
   interface AppListAction extends Action {
       type: typeof APP_LIST,
       [FETCH]: {},
   }
   

2. 设置类型 ThunkResult关注

   type ThunkResult = ThunkAction<void, State, undefined, AppActions>;
   

   您很可能不需要 TReturnType . Thunk 操作只是分派(dispatch)代码内部所需的所有内容，并且不返回任何内容 (void)。

3. 同步 Action 的 Action 创建者可能看起来像

   interface SyncAction1 extends Action {
       type: 'SYNC_ACTION',
       argument: string
   }
   
   const SomeSyncAction = (argument: string) => <SyncAction1>{ type: 'SYNC_ACTION', argument }
   

4. 异步 Action 的 Action 创建者可能看起来像

   export const loadList = (): ThunkResult => (dispatch: ThunkDispatcher) => {
        dispatch(/* start loading */);
        const result = await // load api call
        dispatch(loadListCreator(result));
   }
   

5. Reducer 看起来像

   export function loadReducer (state = initalState, action: AppActions)
   // reducer code