引言
在前端开发中，状态管理是一个必不可少的部分。Redux 是一个非常流行的状态管理库。而 Redux 本身只处理同步的数据流，这时候 Redux Saga 库就成了一个非常好的选择。
Redux Saga 是一个用于管理 Redux 之间异步操作的库，它允许您将副作用（例如异步点、日志和更好的错误处理）从应用程序的副本中分离出来，并编写更容易测试的代码。
本文将详细介绍如何使用 npm 包 @redux-saga/types ，来让 Redux Saga 的类型检查更加友好。
安装 @redux-saga/types
在开始使用 @redux-saga/types 之前，您需要先安装它。使用命令行，进入您的项目根目录，使用以下命令来安装 npm 包：
npm install --save @redux-saga/types
使用 @redux-saga/types
定义 Saga
在使用 @redux-saga/types 来定义 Saga 之前，我们在这里假设您已经熟悉了 Redux Saga 的相关知识。
在 Saga 中定义的方法需要对原始 action 形式的方法做一个"扩展"，指明其返回结果的类型。这样可以提高代码的可读性，也可以更好支持 IDE 中的类型提示。而在 @redux-saga/types 中，提供了一组泛型类型，支持更加严谨的类型检查。
例如，在我们有一个异步方法：
-- -------------------- ---- -------
------ - ----- ---- --------- - ---- ---------------------
------ - --------------- - ---- -------------
------ --------- ----------- -
--- -
----- ---- - ----- ----------- ------- -- ------
----- ----------------------------------- -- ------ ------- ---- ------
- ----- --- -
----- ---------------------------------------- -- ------ ------- ---- ------
-
-
------ --------- ------------------- --- -
-- -- ---------- ------
----- ---------------------------------- -----------
-在这个代码中，fetchData 方法使用了 Redux Saga 提供的 call 和 put 等方法来实现异步。
现在我们希望使用 @redux-saga/types 来实现更好类型检查。 首先需要在 fetchData 函数前定义好类型，代码如下：
-- -------------------- ---- -------
------ - ----- ---- --------- - ---- ---------------------
------ - --------------- - ---- -------------
------ - ----------- --------- - ---- ---------------------------
------ - ------------- - ---- -------------------
---- -------- - - ----- ------ -- -- ------
------ --------- ------------ ----------
------------------- - -----------------------------------
-----
--------
- -
--- -
----- ----- -------- - ----- ----------- ------- -- ----- -------- --
----- ----------------------------------- -- ------ ---- -------- --
- ----- --- -
----- ---------------------------------------- -- ------ --------
-
-
------ --------- ------------------- --- -
----- ---------------------------------- -----------
-在这个定义中，fetchData 指明了：
- 使用了 Redux Saga 的
CallEffect和PutEffect并具体指明了方法的具体类型 fetchData值得返回结果是DataType类型fetchData函数内部所有的put方法都需要接受PayloadAction类型
这样，在定义了类型后，就可以在开发中自动地获得类型检查和代码提示。
修改 Action
同样的，我们在定义 Action 时可以使用 @redux-saga/types 里的类型检查能力。举个例子：
-- -------------------- ---- ------- ------ - ------------- - ---- ------------------- ------ - ---------- - ---- ------------------- ------ - --------- - ---- ---------- ---- ---------------- - - ----- ------ -- ------ ----- --------------- - - -------- -- -- -- ----- ------------ --- -------- ------ ----------------- -- -- ----- --------------------- -------- ---- --- -------- -------------- ------- -- -- ----- --------------------- -------- ------------ --- -- ---- ------------------- - ----------------- ----------------- ------ ---- ---------- - -------------------- ------ ---- ------------------ - ---- - --------------------- -- ---- ------ ------ ---- ------------------- - ---- - ------------------- - --------------------
在这个代码中，我们使用了 @redux-saga/types 的 PayloadAction 类型定义了我们的fetchDataAction中的success和failure action。
这样，在使用fetchDataAction的时候，我们就可以自动获得类型提示和类型检查了。
总结
使用 @redux-saga/types ，您可以定义 Saga 和 Action 并且获得更好的代码提示和类型检查。这对于大型项目和多人协作非常有用。正确使用类型定义，将会产生一流的类型支持和错误消息，同时帮助您防止在代码库中的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaf9ab5cbfe1ea061108a