在 Redux 中，effects 是指在 action 被 dispatch 后，执行一些副作用的函数，例如发送网络请求或者操作本地存储等。Redux-saga 和 Redux-thunk 是两个比较常用的 effects 库，本文将介绍如何对 effects 进行封装和使用。
封装 effects
封装 effects 的目的是为了让代码更加简洁易懂，同时也可以提高代码的复用性和可维护性。下面是一个简单的封装示例：
------ - ----- ---- ---------- - ---- ---------------------
------ - ------------- - ---- ---------
--------- ------------------- -
--- -
----- -------- - ----- ------------------- -----------------------
----- ----- ----- ------------------------ -------- - -------- - ---
- ----- ------- -
----- ----- ----- ------------------------ -------- - ----- - ---
-
-
--------- ------------------ -
----- ----------------------------------- -------------
-
------ ------- -
-----------------
--在这个示例中，我们将获取用户信息的逻辑封装成了一个名为 getUserInfo 的 generator 函数，并使用了 Redux-saga 提供的 call 和 put effects 来执行异步请求和更新 Redux store。我们还将 watchGetUserInfo 函数封装起来，以便在其他地方引用。
使用封装的 effects
使用封装的 effects 也非常简单，只需要在组件中 dispatch 对应的 action 即可。下面是一个使用示例：
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- -------------
----- -------- ------- --------------- -
------------------- -
----- - --------- ------ - - -----------
-------------------------------------
-
-------- -
----- - ---------- --------- ----- - - -----------
-- ----------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
-----
---------- ---------------------
--------- --------------------
------
--
-
-
----- --------------- - ------- -- -
----- - ---------- --------- ----- - - ---------------
------ - ---------- --------- ----- --
--
------ ------- -----------------------------------在这个示例中，我们使用了 Redux 的 connect 函数将组件和 Redux store 连接起来，并在 componentDidMount 生命周期中 dispatch 了一个 getUserInfoRequest 的 action。在 mapStateToProps 函数中，我们将 Redux store 中的状态映射到组件的 props 上。
总结
通过封装 effects，我们可以让代码更加简洁易懂，同时也可以提高代码的复用性和可维护性。在使用封装的 effects 时，只需要 dispatch 对应的 action 即可。在实际开发中，我们可以根据需求封装不同的 effects，以便在不同的场景中使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663c90e0d3423812e4a7a92f