redux-common-types-ts 是一款基于 TypeScript 的 Redux 类型库，它扩展了 Redux 的 Action、Reducer 和 Store 类型。该类型库适用于 Redux 应用中的常见类型，通过提供类型别名和泛型，简化了类型定义的繁琐过程，使得 Redux 应用的类型定义更加简单和高效。
安装
在项目中使用 npm 或者 yarn 安装 redux-common-types-ts
npm install redux-common-types-ts
或
yarn add redux-common-types-ts
使用方法
引入
在使用之前，需要将 redux-common-types-ts 引入到你的项目中。
import {
ActionWithPayload,
ReducerWithPayload,
ReducerWithoutPayload,
StoreEnhancerWithStore,
} from "redux-common-types-ts";使用类型别名
在定义 Redux 的 Action、Reducer 和 Store 时，我们可以使用类型别名来简化类型定义。
Action
type SetNameAction = ActionWithPayload<"SET_NAME", string>;
上述代码定义了一个名为 SetNameAction 的类型别名，它包含两个参数，分别是:
- 字符串 “SET_NAME” 作为 Action 的 type 属性；
- 字符串类型的 name 属性，它是一个 payload。
这样，在创建新的 Action 实例的时候，就可以直接使用 SetNameAction 类型，而不需要手动定义一个新的类型。
const setName: SetNameAction = {
type: "SET_NAME",
payload: "Bob",
};Reducer
type CountReducer = ReducerWithPayload<"INCREMENT", number> | ReducerWithoutPayload<"DECREMENT">;
上述代码定义了一个名为 CountReducer 的类型别名，它定义了两个 Reducer，分别是：
- 取字字符串 ”INCREMENT” 作为 Action 的 type 属性；以及
- 字符串 “DECREMENT”，不包含 payload。
这样，在创建一个新的 reducer 时，就可以直接使用类型别名 CountReducer，而不需要重新定义一个 reducer。
-- -------------------- ---- -------
----- ------------- ------------ - ------- ------ - -- ------- -------------- -- -
------ ------------- -
---- ------------
------ ----- - ---------------
---- ------------
------ ----- - --
--------
------ ------
-
--Store 增强器
type StoreEnhancer = StoreEnhancerWithStore<{}, {}>;上述代码定义了一个名为 StoreEnhancer 的类型别名，它为 Redux 中的 Store 提供增强支持。
const store: Store<RootState, MyAction> = createStore(reducer, storeEnhancer);
也可以结合 redux-devtools-extension 使用：
import { composeWithDevTools } from 'redux-devtools-extension';
const storeEnhancerWithDevTools = composeWithDevTools(StoreEnhancer);
const store: Store<RootState, MyAction> = createStore(reducer, storeEnhancerWithDevTools);使用泛型
redux-common-types-ts 类型库本身也包含了基于泛型的类型定义，可以帮助我们更快地定义和使用 Redux 应用中的类型。
Action
泛型只比字符串类型代码更灵活，可以定义任何类型的 payload。
interface User {
name: string;
age: number;
}
type SetUserAction = ActionWithPayload<"SET_USER", User>;Reducer
泛型可以帮助我们缩小了接收 Action 参数的类型范围。
type CountReducer<T extends Action = MyAction> = Reducer<T & { count: number }>;Store
泛型能够更好地定义 Store 的 state 和 action 类型。
interface RootState {
user: User;
count: number;
}
type MyAction = SetNameAction | SetUserAction;
const store = createStore<RootState, MyAction, {}, {}>(reducer);示例代码
-- -------------------- ---- -------
------ -
------------------
-------------------
----------------------
-----------------------
- ---- ------------------------
------ - ------------ -------- ----- - ---- --------
------ - ------------------- - ---- ---------------------------
--------- ---- -
----- -------
---- -------
-
---- ------------- - ----------------------------- --------
---- ------------- - ----------------------------- ------
----- -------- ------------- - -
----- -----------
-------- ------
--
----- -------- ------------- - -
----- -----------
-------- - ----- -------- ---- -- --
--
---- -------------- ------- ------ - --------- - --------- - - ------ ------ ---
---- -------- - ------------- - --------------
----- ------------- ------------ - -
------ - ----- ------ - - ---- - - ------ ------ - - -
----- ---
---- --
------ --
--
------- --------
- -- -
------ ------------- -
---- -----------
------ - --------- ----- -------------- --
---- -----------
------ - --------- ----------------- --
--------
------ ------
-
--
--------- --------- -
----- -----
------ -------
-
----- ------ ---------------- --------- --- --- - ------------
-------------
---------------------------------------------- ------
--
------------------------
------------------------
------------------------------ -- - ----- - ----- -------- ---- -- -- ------ - -指导意义
在 Redux 应用的开发过程中，类型定义是必不可少的一部分。redux-common-types-ts 类型库通过提供了类型别名和泛型，大大简化了 Redux 应用的类型定义过程，使得 Redux 应用的类型定义更加简单和高效。
如果你想更好地管理你的 Redux 应用中的类型定义，那么 redux-common-types-ts 绝对是一个值得尝试的库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b481e8991b448defca