介绍
redux-effects-fetchr 是一个用于同步 redux 应用程序和服务器数据的 npm 包。它使用 Fetchr 提供的服务端数据提供程序，提供了一个方便的方法来发出和处理 ajax 请求，并将响应数据存储在 redux store 中。
该 npm 包使用 redux-saga 和 redux-actions 作为前端框架，所以在使用之前需要先了解它们。
安装
使用 npm 安装 redux-effects-fetchr。
npm install redux-effects-fetchr --save
使用
首先，在应用程序的 redux store 中，需要启用该模块的 middleware。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ -------------------- ---- -------------
------ ------------ ---- -----------------------
----- -------------- - -----------------------
----- ----- - ------------
------------
----------------
---------------
--------------
-
--
然后，创建一个 fetchr 服务，用来处理应用程序的所有 ajax 请求。在 Fetchr 中，需要定义一组服务端调用，每个服务端调用都对应一个或多个端点，一个端点可以对应多个方法。在客户端中，通过服务端调用给出的端点和方法名来调用对应的服务器函数。
-- -------------------- ---- -------
------ ------ ---- ---------
----- ------ - --- --------
-------- -------
--------- ---
------ -------------
----------- ----
---
-------------------
----- ----------
--------- --------- ------- ------- --- -
----- ----- - -
-------- --------
---- -----------
---- ----------
--
----------------------------------------------------------------------------------------------------
-------------- -- ----------------
---------- -- -
-------- ------
--
------------ -- -
----------
---
-
---
接下来，需要创建一个 redux action，用来发出 fetchr 请求。这个 action 包含了请求的方式、URL、参数和回调函数。在发起 ajax 请求后，fetchr 会将响应的数据存储在 redux store 内部的 response 对象中。
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ ----- ------------ - ----------------------------- ----- ---- -- --
-------- ----------
------- -------
------- - ---- --- --
--------- ----- ----- -- -
-- ----- -
-------------------
- ---- -
------------------
-
-
----最后，在 redux saga 中，调用 fetchWeather action。这将触发 redux effects，发出 ajax 请求并将响应数据保存在 redux store 中。
-- -------------------- ---- -------
------ - ----- ---- --------- - ---- ---------------------
------ - ------------ - ---- ---------------------------
------ --------- ------------------------ -
--- -
----- -------- - ----- ------------------ ----------------
----- -----
----- ------------------------
-------- --------
---
- ----- ------- -
----- -----
----- -----------------------
------ -------------
---
-
-
------ --------- ---------- -
----- -------------------------- ------------------
-示例代码
完整的使用示例代码如下：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ -------------------- ---- -------------
------ - ------------ - ---- ----------------
------ ------------ ---- -----------------------
------ ------ ---- ---------
------ - ----- ---- --------- - ---- ---------------------
----- -------------- - -----------------------
----- ------ - --- --------
-------- -------
--------- ---
------ -------------
----------- ----
---
-------------------
----- ----------
--------- --------- ------- ------- --- -
----- ----- - -
-------- --------
---- -----------
---- ----------
--
----------------------------------------------------------------------------------------------------
-------------- -- ----------------
---------- -- -
-------- ------
--
------------ -- -
----------
---
-
---
----- ----- - ------------
------------
----------------
---------------
--------------
-
--
------ ----- ------------ - ----------------------------- ----- ---- -- --
-------- ----------
------- -------
------- - ---- --- --
--------- ----- ----- -- -
-- ----- -
-------------------
- ---- -
------------------
-
-
----
------ --------- ------------------------ -
--- -
----- -------- - ----- ------------------ ----------------
----- -----
----- ------------------------
-------- --------
---
- ----- ------- -
----- -----
----- -----------------------
------ -------------
---
-
-
------ --------- ---------- -
----- -------------------------- ------------------
-结论
redux-effects-fetchr 是一个非常适合基于 redux 构建应用程序的 npm 包，它提供了一种简单而高效的方法来处理 ajax 请求，并将响应数据存储在 redux store 中。它非常易于安装和使用，并且通过将 redux-saga 和 redux-actions 结合使用，可以使我们更加方便地编写 redux 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c05