时间戳

首页 > 解决方案 > 使用 typesafe-actions 的异步操作减速器类型

reactjs - 使用 typesafe-actions 的异步操作减速器类型

问题描述

我在使用createAsyncAction模块typesafe-actions（Typesafe Actions）并为我的减速器输入相同的内容时遇到了一点困难

这是动作

export const login = createAsyncAction(
    EmployeeConstants.LOGIN.REQUEST,
    EmployeeConstants.LOGIN.SUCCESS,
    EmployeeConstants.LOGIN.ERROR
)<ILoginRequest,ILoginSuccess, Error>();

如您所见，这会创建一个异步操作构建器AsyncActionBuilder，而不是操作本身。

我的减速器是这样输入的

import * as loginActions from './actions';

type IEmployeeActions = ActionType<typeof loginActions>;

const employeeState = (state = initialState, action: IEmployeeActions) => {
  // switch cases
}

但我无法访问payload或type（显然）因为loginActions是异步构建器的联合而不是操作本身。

我该如何解决它们？

标签： reactjstypescriptreact-redux

解决方案

好的，我所拥有的实际上是正确的，但是在创建常量时我的实现很糟糕createAsyncAction

我正在动态生成如下常量：

function createAsyncTypes(type: string) {
    return {
        REQUEST: type + "_REQUEST",
        SUCCESS: type + "_SUCCESS",
        ERROR: type + "_ERROR"
    }
}

并且 TS 服务器在 linting 期间无法计算它，并且在链接期间造成了混乱。

我把它们改成这样，

export const login = createAsyncAction(
    "LOGIN_REQUEST",
    "LOGIN_SUCCESS",
    "LOGIN_FAILURE"
)<ILoginRequest, ILoginSuccess, Error>();

并且 TS Server 有效地显示了导出

推荐阅读