如何编写没有参数的类型化操作

Question

Github 问题表明我们可以为此目的使用 TypedAction.defineWithoutPayload，但我找不到任何相关示例。

当 accessToken 存储在有效负载中时，我使用它进行登录。如果令牌存在，则用户可以访问私有页面。

export const login = (token: string) => typedAction("LOGIN", token);

现在，在注销按钮上，我正在尝试执行一个删除有效负载中存储值的操作。在这种情况下，将没有用于调度操作的参数。那么 typedAction 怎么写呢？

如果我使用：

export const logout = () => typedAction("LOGOUT");

我开始在我的减速器的有效负载上收到一个错误，该属性在类型注销时不存在。

这是我的减速器：

export const tokenReducer = (
  state: IState['token'] = null,
  { type, payload }: AppAction,
): typeof state => {
  switch (type) {
    case 'LOGIN':
      return payload;
      case 'LOGOUT':
        return null;
    default:
      return state;
  }
};

代码沙盒：https://codesandbox.io/s/keen-brook-kntkm?file=/src/store/actions/login.ts:50-118

电子邮件：c@c.com 密码：检查

编辑：

export interface IState {
    token: string | null;
  }

const initialState: IState = {
  token: null
};

如果我按照 IDE 的建议使用 state: typeof initialState 或 state = initialState，则 action.payload 出错：

Type 'string' is not assignable to type 'IState'.ts(2322)

如果我尝试state: initialState那么显然：

'initialState' refers to a value, but is being used as a type here. Did you mean 'typeof initialState'?ts(2749)
``

Answer 1

您定义typedAction 函数的方式可以正常工作：

export function typedAction<T extends string>(type: T): { type: T };
export function typedAction<T extends string, P extends any>(
  type: T,
  payload: P
): { type: T; payload: P };
export function typedAction(type: string, payload?: any) {
  return { type, payload };
}

您遇到的问题是由于您的减速器参数中的动作解构：

export const tokenReducer = (
  state: IState["token"] = null,
  { type, payload }: AppAction
): typeof state => {
  // ...
};

解构和 TypeScript 的一个困难是，一旦你这样做了，变量的类型就会变得彼此独立。将动作解构为{ payload, type } 会生成type: 'LOGIN' | 'LOGOUT' 和payload: string | undefined 变量。即使您稍后细化type 的值，就像在您的switch 语句中一样，payload 仍然具有string | undefined 类型； TypeScript 不会在type 提炼后自动提炼payload 的类型；他们的类型是完全独立的。

所以你可以使用的一个有点丑陋的技巧是不解构：

export const tokenReducer = (
  state: IState['token'] = null,
  action: AppAction,
): typeof state => {
  switch (action.type) {
    case 'LOGIN':
      return action.payload;
    case 'LOGOUT':
      return null;
    default:
      return state;
  }
};

之所以有效，是因为在您的 switch 语句中，它能够将 action: AppAction 类型细化为更具体的登录或注销类型，因此 action.payload 现在与特定于其中一个操作的有效负载类型密切相关。

这是我使用的 redux 操作的另一种模式，您可能会发现更方便的at my fork 让您享受映射类型的强大功能，以使用更少的样板来定义化简器。首先，您必须使用类型/有效负载映射定义一个类型，并定义一些派生自该类型的类型：

export type ActionPayloads = {
  LOGIN: string;
  LOGOUT: void;
};

export type ActionType = keyof ActionPayloads;

export type Action<T extends ActionType> = {
  type: T;
  payload: ActionPayloads[T];
};

您的动作创建者现在可以根据该地图定义：

export function typedAction<T extends ActionType>(
  type: T,
  payload: ActionPayloads[T]
) {
  return { type, payload };
}

接下来，你可以定义一个辅助函数来创建一个强类型的reducer：

type ReducerMethods<State> = {
  [K in ActionType]?: (state: State, payload: ActionPayloads[K]) => State
};

type Reducer<State> = (state: State, action: AppAction) => State;

function reducer<State>(
  initialState: State,
  methods: ReducerMethods<State>
): Reducer<State> {
  return (state: State = initialState, action: AppAction) => {
    const handler: any = methods[action.type];
    return handler ? handler(state, action.payload) : state;
  };
}

（对于那个丑陋的: any 演员，我还没有找到一个好的解决方法，但至少我们从逻辑上知道打字是从外面发出的声音）。

现在，您可以为您的操作处理程序使用漂亮的隐式类型定义您的减速器：

type TokenState = string | null;

export const tokenReducer = reducer<TokenState>(null, {
  LOGIN: (state, token) => token, // `token` is implicitly typed as `string`
  LOGOUT: () => null              // TS knows that the payload is `undefined`
});