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

引子

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

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

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

解类型问题的过程

常见无封装的 Action 类型写法

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

ts 复制代码
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 社区的回答中都有提到,但我认为这并不是最完美的,而且组织形式也"惊为天人"。

ts 复制代码
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,将会出现什么情况。我宣布 Action 类型大厦即将建成!!!

ts 复制代码
type Action = BuildSingleAction<'type1', Type1Payload>
  | BuildSingleAction<'type2', Type2Payload>
  | BuildSingleAction<'type3', Type3Payload>
  | BuildSingleAction<'type4', Type4Payload>
  | BuildSingleAction<'type5', Type5Payload>
  | BuildSingleAction<'type6', Type6Payload>
  | BuildSingleAction<'type7', Type7Payload>
  | BuildSingleAction<'type8', Type8Payload>
  | BuildSingleAction<'type9', Type9Payload>
  | BuildSingleAction<'type10', Type10Payload>
  | BuildSingleAction<'type11', Type11Payload>;

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

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

解决方案

ts 复制代码
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 类型做了什么

ts 复制代码
/** 定义一个工具类型将 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];

总结

ts 类型真是技术活,人生苦短,我选 Any Script 👻

相关推荐
来一碗刘肉面6 小时前
TypeScript - 属性修饰符
前端·javascript·typescript
Rowrey10 小时前
react+typescript,初始化与项目配置
javascript·react.js·typescript
乔冠宇21 小时前
微信小程序中将图片截图为正方形(自动居中)
微信小程序·小程序·typescript·uniapp
念九_ysl1 天前
前端循环全解析:JS/ES/TS 循环写法与实战示例
前端·javascript·typescript
MardaWang2 天前
HarmonyOS开发,遇到 Object.assign(this, source)报错怎么解决?
typescript·harmonyos
IT、木易3 天前
TypeScript跟js,es6这些的区别
javascript·typescript·es6
孟陬3 天前
持续改善 React 代码的 SOLID 原则(附带 hooks 详细案例)适用于高级前端
react.js·设计模式·typescript
李二。3 天前
TypeScript学习:初学
typescript
DCTANT4 天前
【原创】vue-element-admin-plus完成编辑页面中嵌套列表功能
前端·javascript·vue.js·elementui·typescript
Hamm4 天前
巧妙使用Vue3泛型组件,提升你的组件使用体验
前端·vue.js·typescript