简介
Redux 是一种流行的 JavaScript 状态管理库。在使用 Redux 时，开发者需要定义 action 和 reducer 两个概念。而利用 TypeScript 可以让我们方便地将 action 和 reducer 进行类型化定义，从而避免各类类型错误的出现。Redux Typed Action Reducer 是一个可以让我们更方便地定义 TypeScript 类型化 action 和 reducer 的库。
安装
可以使用 npm 进行安装，命令为：
npm i redux-typed-action-reducer
使用
定义 action 和 reducer
首先，我们需要定义我们的 action 类型。通常，我们会定义一个 enum 来包含我们 action 的名称。
export enum ExampleActionType {
SetTitle = 'SetTitle',
Increment = 'Increment',
Decrement = 'Decrement',
}之后，我们可以通过继承 ActionPayload 或者 ActionMetaPayload 来对 action 的 payload 或者 meta 进行类型化定义。比如：
-- -------------------- ---- ------- ------ - ------------- - ---- ----------------------------- --------- --------------- - ------ ------- - --------- ---------------- - ------ ------- - --------- ----------- - ------- ------- - ------ --------- -------------------- ------- ------------------------------ --------------------------- - ------------------------------- ---------------------------- - - ------ --------- ------------------------ ------- ------------------------------ - -
这里我们定义了一个 ExampleActionPayload 来表示我们操作时可能带有的 payload。payload 中包含了一个 SetTitlePayload 和一个 IncrementPayload。注意，由于 payload 是由不同的 action 共用的，因此需要使用联合类型（Union Type）来表达。
这里我们还定义了一个带 MetaPayload 的 ExampleActionMetaPayload 来表示我们可以在 action 里传入 meta 数据。
最后，我们可以定义我们的 reducer。
-- -------------------- ---- -------
------ -
------------------
--------------
-------------------
- ---- -----------------------------
--------- ---------- -
------ -------
---------- --------
-
----- ------------- ---------- - -
------ ---
---------- ------
--
-- ------- -------
----- -------- - -
------ -----------
-------- ------------------------------ ---------------------------
- -- -
------ ---------- ------ -----------------------
--
----- --------- - -
------ -----------
-------- ------------------------------- ----------------------------
- -- -
------ -
---------
------ ----------- - ----------------------
--
--
---- -------------- - ------ -------- - ------ ----------
-- ---- -------
--------- --------- -
----- -------
-
----- ----------------- --------- - -
----- ---
--
----- ------- - -
------ ----------
----- ------------------------------
- -- -
------ ---------- ----- ------------------
--
---- ----------- - ------ --------
------ ----- -------------- - -------------------------------- -
----------------------------- ---------
------------------------------ ----------
-- -
--------
---我们定义了一个 setTitle 方法来处理 SetTitle 类型的 action。这个 reducer 来负责存储 title 字段。同样地，我们有一个用于处理 Increment 类型的 action 的 reducer，用于在 title 后面添加数字。这里我们定义了两个 PayloadReducer。
在 ActionType2ReducerMap 类型中，我们将各自的 reducer 与对应的 actionType 进行了绑定。
最后，我们定义了一个 MetaReducer 的 reducer 来处理我们传入的 meta 数据。
使用 createTypedReducer 方法，我们将此 reducer 组合起来，生成了一个类型安全的 reducer。
现在，我们就可以使用此 reducer 入手了。比如，我们在添加 SetTitle action 的时候，我们可以这样完成：
import { ExampleActionType, ExampleActionPayload } from './example';
export const setTitle = (title: string): ExampleActionPayload => {
return { type: ExampleActionType.SetTitle, payload: { title } };
};使用中间件增强 reducer
我们可以通过使用中间件来增强我们的 reducer。比如，我们可以使用 redux-thunk 中间件来让我们的 reducer 支持异步操作。
import { applyMiddleware, createStore } from 'redux';
import { exampleReducer } from './reducer/example';
import thunk from 'redux-thunk';
export const store = createStore(exampleReducer, applyMiddleware(thunk));这样，我们就把带有 ThunkAction 的 reducer 和中间件一同注入到了 store 中。
示例代码
下面是一个使用 redux-typed-action-reducer 的例子：
-- -------------------- ---- -------
------ -
------------------
--------------
-------------------
- ---- -----------------------------
------ - ---------------- ----------- - ---- --------
------ ------ - ----------- - ---- --------------
------ ---- ----------------- -
-------- - -----------
--------- - ------------
--------- - ------------
-
--------- --------------- -
------ -------
-
--------- ---------------- -
------ -------
-
--------- ----------- -
------- -------
-
------ --------- -------------------- -------
------------------------------ ---------------------------
- ------------------------------- ---------------------------- - -
------ --------- ------------------------ -------
------------------------------ - -
--------- ---------- -
------ -------
---------- --------
-
----- ------------- ---------- - -
------ ---
---------- ------
--
-- ------- -------
----- -------- - -
------ -----------
-------- ------------------------------ ---------------------------
- -- -
------ ---------- ------ -----------------------
--
----- --------- - -
------ -----------
-------- ------------------------------- ----------------------------
- -- -
------ -
---------
------ ----------- - ----------------------
--
--
---- -------------- - ------ -------- - ------ ----------
-- ---- -------
--------- --------- -
----- -------
-
----- ----------------- --------- - -
----- ---
--
----- ------- - -
------ ----------
----- ------------------------------
- -- -
------ ---------- ----- ------------------
--
---- ----------- - ------ --------
------ ----- -------------- - -------------------------------- -
----------------------------- ---------
------------------------------ ----------
-- -
--------
---
----- --------- - --- --------------- -- -
------ --- ----------------- -- -
------------- -- -
---------------
-- ------
---
--
------ ----- ------------------ - ------- -------- ------------
-----
-----------
--------
--------------------
- -- -
------ ----- ---------- -- -
----- ------ - ----- ------------
---------- ----- --------------------------- -------- - ----- - ---
---------- ----- -------------------------- ----- - ------ - ---
--
--
----- ----- - --------------------------- ------------------------总结
使用 Redux Typed Action Reducer 可以让我们更加方便地使用 TypeScript 进行 Redux action 和 reducer 的类型化定义，从而减少类型错误的出现，提高代码的健壮性。同时，通过添加中间件，我们可以方便地增强我们的 reducer 能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c9081e8991b448d9fb4