typescript - 在 typescript 中使用 redux-actions、redux-thunk 和 redux-promise-middleware

Question

这里是 typescript + redux 生态系统的新手。

在 TypeScript 中使用 redux-actions、redux-thunk 和 redux-promise-middleware 时，如何将类型信息正确封装到异步操作中？

身份验证示例:

/* actions */
const login = createAction(LOGIN, authService.login);


/* authService */
async function login(payload: LoginPayload): Promise<LoginResponse> {
 // ... authenticate here.
}

因为我使用的是 redux-promise-middleware，LOGIN_PENDING、LOGIN_FULFILLED/LOGIN_REJECTED 操作会自动发送。我如何为这些创建类型，以便 reducer 可以找出它正在处理的操作对象？

由于 redux-actions 遵循 FSA，_FULFILLED 应该有 action.payload。 _REJECTED 应该有 action.error

/* reducer */
function loginReducer(state: AppState, action: AuthAction) {
  switch (action.type) {
    case LOGIN_FULFILLED:
      // action.payload should be defined as LoginResponse object here.
      // action.error shouldnt be present.
    case LOGIN_REJECTED:
      // action.error should be defined
  }
}

我将如何创建 AuthAction 类型？我猜它应该是每个单独操作类型的联合类型(可以是它们自己的联合类型)。 redux-actions 还为此提供了 Action 和 BaseAction 类型。

Answer 1

“正常”的方法是指定所有的“操作接口(interface)”和一个联合类型到 reducer。然后打开类型。但是从示例代码中不清楚 AuthAction 类型是否是联合类型...

例如

type T = Object; //Your resolve data type
interface ILoginAction {type: "LOGIN", payload: {promise: Promise<T> }}
interface ILoginRejectedAction {type: "LOGIN_REJECTED", error: YourErrorType }
interface ILoginFulfilledAction {type: "LOGIN_FULFILLED", payload: {data: T }}

export type LoginActions = ILoginAction | ILoginRejectedAction | ILoginFulfilledAction

reducer :

import { LoginActions } from "./actions"; //Or where your actions are
function loginReducer(state: AppState, action: LoginActions) {
  switch (action.type) {
    case "LOGIN":
      // action.payload should be defined as LoginResponse object here.
      // action.error shouldnt be present.
    case "LOGIN_REJECTED":
      // action.error should be defined
  }
}

您可能可以使用一些泛型以更智能的方式创建此联合，但这是手动方法。