带有打字稿的Redux Thunk

Question

我正在学习Typescript，并尝试实现一个简单的React/Redux应用程序。当我使用同步操作时，它工作得很好，但问题在于异步操作。我正在学习官方的redux教程。

首先，我宣布会议状态

export interface UserSessionState {
  loggedIn: boolean;
}

然后我为这个动作声明接口

interface UpdateSessionAction {
  type: 'USER_LOGIN';
  payload: boolean;
}

我使用联合类型导出它们

导出类型UserActionTypes=UpdateSessionAction

然后我有实际的行动

export function updateSession(loggedIn: UserSessionState) {
  return {
    type: 'USER_LOGIN',
    payload: loggedIn,
  };
}

我有一个虚假的 API 调用

function api() {
  return Promise.resolve(true);
}

最后登录

export const userLogin = (): ThunkAction<
  void,
  {},
  {},
  AnyAction
> => async (dispatch: ThunkDispatch<{}, {}, AnyAction>) => {
  const res = await api();
  dispatch(updateSession({ loggedIn: res }));
};

在减速器中，我简单地初始化状态

初始状态： 用户会话状态 = {loggedIn： false}

然后我为减速机做正常的还原工作。

最后，在我的商店中，我调用初始操作以检查状态

store.dispatch(userLogin());

我一直收到这个错误:

Argument of type 'ThunkAction<Promise<void>, {}, {}, AnyAction>' is not assignable to parameter of type 'AnyAction'.
  Property 'type' is missing in type 'ThunkAction<Promise<void>, {}, {}, AnyAction>' but required in type 'AnyAction'.

我缺少一个类型，但我不知道我做错了什么。




Answer 1

没有完全回答这个问题的相同问题，但我偶然发现了使用 Redux useDispatch（） 钩子的相同问题。同样，对异步操作类型的支持也不太好。我最终做的是添加一个异步类型，并为键入创建了一个新的钩子：

// hooks.ts

export type AsyncAction = (dispatch: (action: Action) => any) => void;
export type Dispatcher = (action: AsyncAction | Action) => void
export const useAppDispatch: () => Dispatcher = useDispatch as any;

// async-actions.ts

import {AsyncAction} from "./hooks"

export const myAsyncAction: () => AsyncAction = () => (dispatch: (action: 
Action) => any) => {
// async logic with dispatching goes here:
// dispatch(...)
}

//my-component.tsx

import {myAsyncAction} from "./async-actions"
import {useAppDispatch} from "./hooks"

export const MyComponent = () => { 
  const dispatch = useAppDispatch();
  syncHandler () {
    disaptch ({type: MY_SYNC_ACTION})
  }
  asyncHandler () {
    disaptch (myAsyncAction())
  }
  ...
}

尽管有点Rescrep“hacky”，但这种方法的优点是您可以获得对同步和异步（Thunk）操作的完整类型检查支持，并且从客户端（组件）的角度来看没有区别 - 无需使用不同的类型系统。

Answer 2

总之：

您之所以会出现此错误，是因为从userLogin（）函数返回的是一个ThunkAction

为什么会发生这种情况？

调度应接受AnyAction类型的参数AnyAction是一种redux类型，它扩展了Action（它有一个强制属性type）。

这是来自当前的 redux 类型文件

export interface Action<T = any> {
  type: T
}

/**
 * An Action type which accepts any other properties.
 * This is mainly for the use of the `Reducer` type.
 * This is not part of `Action` itself to prevent users who are extending `Action.
 */
export interface AnyAction extends Action {
  // Allows any extra properties to be defined in an action.
  [extraProps: string]: any
}

如何解决？使用“砰”类型，而不是“重复”的标准“派单”。以下示例和更多内容可以在此Gist上找到

const mapDispatchToProps = (dispatch: ThunkDispatch<MyState, void, Action>) => {
  return {
    onRequestClick: (arg: any) => dispatch(myAsyncAction(arg)),
  };
}

另外，请参见本文的地图分派到道具一节