简介
Redux 是一种流行的 JavaScript 状态管理库。在使用 Redux 时,开发者需要定义 action 和 reducer 两个概念。而利用 TypeScript 可以让我们方便地将 action 和 reducer 进行类型化定义,从而避免各类类型错误的出现。Redux Typed Action Reducer 是一个可以让我们更方便地定义 TypeScript 类型化 action 和 reducer 的库。
安装
可以使用 npm 进行安装,命令为:
--- - --------------------------
使用
定义 action 和 reducer
首先,我们需要定义我们的 action 类型。通常,我们会定义一个 enum 来包含我们 action 的名称。
------ ---- ----------------- - -------- - ----------- --------- - ------------ --------- - ------------ -
之后,我们可以通过继承 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 的时候,我们可以这样完成:
------ - ------------------ -------------------- - ---- ------------ ------ ----- -------- - ------- -------- -------------------- -- - ------ - ----- --------------------------- -------- - ----- - -- --
使用中间件增强 reducer
我们可以通过使用中间件来增强我们的 reducer。比如,我们可以使用 redux-thunk
中间件来让我们的 reducer 支持异步操作。
------ - ---------------- ----------- - ---- -------- ------ - -------------- - ---- -------------------- ------ ----- ---- -------------- ------ ----- ----- - --------------------------- ------------------------
这样,我们就把带有 ThunkAction
的 reducer 和中间件一同注入到了 store 中。
示例代码
下面是一个使用 redux-typed-action-reducer 的例子:
------ - ------------------ -------------- ------------------- - ---- ----------------------------- ------ - ---------------- ----------- - ---- -------- ------ ------ - ----------- - ---- -------------- ------ ---- ----------------- - -------- - ----------- --------- - ------------ --------- - ------------ - --------- --------------- - ------ ------- - --------- ---------------- - ------ ------- - --------- ----------- - ------- ------- - ------ --------- -------------------- ------- ------------------------------ --------------------------- - ------------------------------- ---------------------------- - - ------ --------- ------------------------ ------- ------------------------------ - - --------- ---------- - ------ ------- ---------- -------- - ----- ------------- ---------- - - ------ --- ---------- ------ -- -- ------- ------- ----- -------- - - ------ ----------- -------- ------------------------------ --------------------------- - -- - ------ ---------- ------ ----------------------- -- ----- --------- - - ------ ----------- -------- ------------------------------- ---------------------------- - -- - ------ - --------- ------ ----------- - ---------------------- -- -- ---- -------------- - ------ -------- - ------ ---------- -- ---- ------- --------- --------- - ----- ------- - ----- ----------------- --------- - - ----- --- -- ----- ------- - - ------ ---------- ----- ------------------------------ - -- - ------ ---------- ----- ------------------ -- ---- ----------- - ------ -------- ------ ----- -------------- - -------------------------------- - ----------------------------- --------- ------------------------------ ---------- -- - -------- --- ----- --------- - --- --------------- -- - ------ --- ----------------- -- - ------------- -- - --------------- -- ------ --- -- ------ ----- ------------------ - ------- -------- ------------ ----- ----------- -------- -------------------- - -- - ------ ----- ---------- -- - ----- ------ - ----- ------------ ---------- ----- --------------------------- -------- - ----- - --- ---------- ----- -------------------------- ----- - ------ - --- -- -- ----- ----- - --------------------------- ------------------------
总结
使用 Redux Typed Action Reducer 可以让我们更加方便地使用 TypeScript 进行 Redux action 和 reducer 的类型化定义,从而减少类型错误的出现,提高代码的健壮性。同时,通过添加中间件,我们可以方便地增强我们的 reducer 能力。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055c9081e8991b448d9fb4