简介
@types/react-redux-epic 是一个 npm 包，它提供了 React 与 Redux 的数据流中间件 redux-observable 的 TypeScript 类型定义。使用这个包，可以强制约束代码中 Epic 函数的类型，避免类型错误。
安装
可以使用 npm 包管理器进行安装：
--- ------- ---------- -----------------------
注意，该包需要配合 redux-observable 一起使用，并且需要将 @types/redux-observable 配置好。
使用
首先，需要在 TypeScript 代码中引入 Epic 类型定义：
------ - ---- - ---- -------------------
然后，在编写 Epic 类型的代码时，可以指定一个泛型参数，以约束输入和输出的类型。例如，下面的代码定义了一个简单的 Epic，它将输入的 action 加倍并输出：
------ - ------ - ---- -------------------
------ - --- - ---- -----------------
------ - -------- ----------- - ---- ------------
----- ------- ------------- -------- - --------- -- -
------ -------------
---------------------------
---------- -- -- ----- ------------------ ---
--
--上面代码中，<Actions, Actions> 泛型参数指定了输入和输出都是与 actions 中的类型相关的。ofType 和 map 等操作符可以直接使用，因为它们已经被引入到了作用域中。
示例代码
这是一个使用 redux-observable 的简单的 Counter 组件示例：
------ - ------------- -------- ----------- - ---- ----------
------ - --------------- - ---- --------
------ - ------- - ---- --------------
------ - ------ - ---- -------------------
------ - ---- - ---- -------------------
------ - --- - ---- -----------------
------ ----- ----------- - -----------------
------ ------ - ------------- ------- -- -
------ ------------- -
---- ----------------------
------ - --------- ------ ----------- - - --
---- ----------------------
------ - --------- ------ ----------- - - --
---- ------------------
------ - --------- ------ ------------------ --
--------
------ ------
-
-
---
------ ----- --------- - -- -- -- ----- --------------------- ---
------ ----- --------- - -- -- -- ----- --------------------- ---
------ ----- ----- - -- -- -- ----- ----------------- ---
------ ----- ------ - -- -- -- ----- ------------------ ---
------ ---- ------- - ----------------- --------- - ------ --------- - ------ ----- - ------ --------
----- ------- ------------- -------- - --------- -- -
------ -------------
---------------------------
---------- -- -- ----- ------------------ ---
--
--
------ ----- -------- - -------
----- ------------ - ----- -- --
-------- -----------------
---
----- -------------- - -
----------
----------
------
------
--
------ ----- ------- - --------------------- ------------------ -------- ---------- ---------- ------ ------ -- -- -
-----
------------- ----------------
------- ------------------------------
------- ------------------------------
------- ------------------------------
------- --------------------------------
------
---在这个示例中，myEpic 函数在输入的 actions 中检查 ActionTypes.DOUBLE，并返回一个 ActionTypes.TRIPEL 的 action。最后使用 combineReducers 将 state 和 action 合并起来，使用 connect 将组件与 state 和 action 进行连接。
注意事项
@types/react-redux-epic只提供了类型定义，需要与 redux-observable 和 redux 进行配合使用，确保已经正确配置ofType和map等操作符需要通过redux-observable的引入进行使用- 在 Epic 函数中使用的 action 不仅仅限于
Actions类型，也可以使用其他类型的 action。但确保任何用于 Redux action 的类型都已经被正确定义 - 可以使用
as Epic<Action, Action>语法强制转换普通函数到 Epic 类型，但不建议这样做，避免类型错误
结论
通过使用 @types/react-redux-epic，可以轻松地为使用 redux-observable 的 TypeScript 项目提供类型约束。由于使用范围很广，大多数前端项目中使用了 React 和 Redux，因此建议在项目中使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedc18db5cbfe1ea0611e3d