在typescript中使用redux-actions，redux-thunk和redux-promise-middleware-Java 学习之路

这里是打字稿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 类型 .

1 回答

执行此操作的“常规”方法是将所有“操作接口”和联合类型指定到reducer . 然后打开类型 . 但是从示例代码中不清楚AuthAction类型是否为union类型...

例如

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

减速器：

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
  }
}

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

回复于 2024-05-17T14:36:42+08:00

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

1 回答

相关问题