如何优雅实现 redux 的 Action ts 类型

141 阅读3分钟

引子

在学习 react 的过程中经常听到过 “redux” 这个状态管理工具。但因为工作中我最常用的是 mobxContext,所以一直都没怎么了解 redux

于是我就抱着试试的想法在新的需求中使用了 useReducer 做组件的状态管理(useReducer 实现了 redux 模式)。

不得不说,在 ts 项目中使用 redux,十分别扭,十分难受,如同踩💩。但是本文并不讨论 redux 的 Reducer 设计中存在的代码冗余。而是讨论如何制作一份精致的💩 ☝️🤓。

解类型问题的过程

常见无封装的 Action 类型写法

下面这种常见的“穷举” action 类型的方式显然需要不停地重复 type:xxx,action:xxx 显得代码比较呆,比较冗余。当然如果你不嫌弃,使用“CV大法”并不影响你的工作效率。

import { useReducer } from 'react';

type RunPayload = { distance: number };
type RunAction = {
  type: 'run';
  payload: RunPayload;
};
type FlyPayload = { height: number };
type FlyAction = {
  type: 'fly';
  payload: FlyPayload;
};
type Action = RunAction | FlyAction;

export const useFoo = () => {
  const [state, dispatch] = useReducer((state: any, action: Action) => {
    switch (action.type) {
      case 'run':
        // 处理 run,ts 可以根据 type 推断出 payload 类型为 { distance: number }
       console.log( action.payload.distance);
        break;
      case 'fly':
        // 处理 fly
        console.log( action.payload.height);
        break;
      default:
        break;
    }
    return state;
  }, {});
};

使用工具类型对每个 Action 进行封装

这个方法我看到在很多 StackOverflow 社区的回答中都有提到,但我认为这并不是最完美的,而且代码组织形式也“惊为天人”。

import { useReducer } from 'react';

type RunPayload = { distance: number };

type FlyPayload = { height: number };
// 使用这个工具类型封装一个 Action
type BuildSingleAction<Type, Payload> = {
  type: Type,
  payload: Payload,
}

type Action = BuildSingleAction<'run', RunPayload>
  | BuildSingleAction<'fly', FlyPayload>

export const useFoo = () => {
  const [state, dispatch] = useReducer((state: any, action: Action) => {
    switch (action.type) {
      case 'run':
        // 处理 run,ts 可以根据 type 推断出 payload 类型为 { distance: number }
       console.log( action.payload.distance);
        break;
      case 'fly':
        // 处理 fly
        console.log( action.payload.height);
        break;
      default:
        break;
    }
    return state;
  }, {});
};

当然一定会有一部分人说:“这代码太优雅辣”,其实不然!在 Action 类型较多时,将会出现“盖楼”情况: 宣布ts大厦建成.png

于是我就开始思考能不能有一种相对来说比较优雅的方式来表达 Action 这个联合类型呢?

我想到了 js 中的 Map。如果把类型表达成 key -> type, value -> payload 的方式。并有一个工具类型把这个类型 Map 转换成 Action,应该是个不错的选择。

解决方案

import { useReducer } from 'react';

type RunPayload = { distance: number };

type FlyPayload = { height: number };

/** 定义一个 key -> type, value -> payload  的 类型 Map*/
type Type2Payload = {
 run: RunPayload,
 fly: FlyPayload,
}

/** 定义一个工具类型将 Map 转为 Action */
type BuildActionFromMap<T extends Record<any, any>> = {
 [TypeKey in keyof T]: {
   type: TypeKey,
   payload: T[TypeKey],
 }
}[keyof T];

type Action = BuildActionFromMap<Type2Payload>;

export const useFoo = () => {
 const [state, dispatch] = useReducer((state: any, action: Action) => {
   switch (action.type) {
     case 'run':
       // 处理 run,ts 可以根据 type 推断出 payload 类型为 { distance: number }
      console.log( action.payload.distance);
       break;
     case 'fly':
       // 处理 fly
       console.log( action.payload.height);
       break;
     default:
       break;
   }
   return state;
 }, {});
};

BuildActionFromMap 工具类型做了什么

/** 定义一个工具类型将 Map 转为 Action */
type BuildActionFromMap<T extends Record<any, any>> = {
  /** 
   * 1. 通过 in 关键字构建 key -> { type: key, payload:T[key] } 的嵌套类型 map
   *    这是因为 in 关键字只能在对象类型的 “[key]:...” 位置使用
   *    (in 关键字直接对联合类型使用获取到的值不具备类型含义,也不可赋值给类型标识符)
   */
  [TypeKey in keyof T]: {
    type: TypeKey,
    payload: T[TypeKey],
  }
  /**
   * 2. 由于我们想要的是这个嵌套类型的 value 部分,
   *    我们可以通过 keyof 获取到其 key 再通过[key] 获取 value
   *    这时我们获取到的就是 Action 对应的联合类型了 
   */
}[keyof T];

总结

这个问题其实困扰了我很久,虽然本人并不喜欢 redux 模式,但是和 Action 类似的数据类型还是挺多的,比如:

  • Websocket 消息类型
  • 流程图节点类型
  • 动态表单组件类型

只能说 ts 类型真是烧脑的活,人生苦短,我选 Any Script 👻👻👻👻👻👻👻