简介
redux-effects-fetchr-cache 是一个用于处理数据请求的 npm 包。该库基于 Redux 和 Fetchr ，能够使前端应用快速且容易地处理数据请求，并自动处理缓存。本文将带您逐步了解如何使用 redux-effects-fetchr-cache 。
安装
可以通过 npm 安装该库：
npm install redux-effects-fetchr-cache --save
使用
引入
在你的应用中引入 redux-effects-fetchr-cache 。
import createFetchrMiddleware from 'redux-effects-fetchr-cache';
配置
在创建 middleware 时，需要通过 createFetchrMiddleware 来创建 fetchrMiddleware 。
const fetchrMiddlewares = createFetchrMiddleware({
xhrPath: '/api',
client: new Fetchr({
xhrPath: '/api'
})
});xhrPath表示请求路径前缀；client表示一个 Fetchr 实例，Fetchr 是一个服务地址协商中间件，可以使用 RESTful API 进行 AJAX 调用。
创建 store
使用 createMiddleware，创建你的 Redux store，像这样：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ---------------------- ---- -----------------------------
------ ----------- ---- -------------
----- ----------------- - ------------------------
-------- -------
------- --- --------
-------- ------
--
---
----- ----- - ------------
------------
----------------------------------
--发起请求
接下来在 action 中发起请求：
-- -------------------- ---- -------
-------- ----------- -
------ -
----- -------------
-------- -
------- -
-------- ----------
------- ------
-
-
--
-- type 指定了执行的 action 类型；
- fetchr 代表执行 action 的类型。通过 ActionType 字段将请求传递给创建的 fetchr 中间件。
处理返回值
在 reducer 中，将返回值合并到 state 。
-- -------------------- ---- -------
-------- -------------- - - ------ --- -------- ------ ------ ---- -- ------- -
------------------- -
---- -------------------
------ -
---------
-------- ----
--
---- ---------------------
------ -
---------
------ ---------------
-------- ------
------ ----
--
---- ------------------
------ -
---------
-------- ------
------ --------------
--
--------
------ ------
-
-示例代码
下面是一个完整的前端应用程序示例。在该程序中，将首先创建标识符，然后调用 fetchItems 函数，该函数旨在从服务器获取 JSON 数据并将其返回。在这种情况下，将使用 Redux 将其缓存。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
----- ----------- ------- --------------- -
-------------------- -
-----------------------------
-
-------- -
----- - ------ ------- - - -----------
------ -
-----
--------------
-------- - --------------------- -
----
----------------- -- -
------ -
--- --------------
-----------
-----
--
---
-----
-
------
--
-
-
--------------------- - -
----------- --------------------------
------ ------------------
-----------------
--- ----------------------------
----- ---------------------------
--
-------------
-------- -------------------------
--
-------- ---------------------- -
------ -
------ ------------------
-------- -------------------
--
-
-------- ---------------------------- -
------ -
----------- ---- -- -
----------
----- --------------
-------- -
--
-
---
-
--
-
------ ------- ------------------------ ---------------------------------总结
redux-effects-fetchr-cache 是一个可靠的数据请求库，可使前端应用程序更加高效、更易于处理。我们在本文中从配置、创建 store、发起请求等方面详细讲解了使用过程，希望能给初学者带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c06