前言
在进行前端项目开发时，我们经常涉及到发送异步请求获取数据，而 Redux 是现代化前端应用常用的状态管理工具，为了更方便的在 Redux 中处理异步请求，我们可以使用 redux-api-isomorphic-fetch-middleware 这个 npm 包。
简介
redux-api-isomorphic-fetch-middleware 是一个 Redux 中间件，充分利用了基于 fetch API 的 isomorphic-fetch 库。它简化了 Redux 应用程序中的异步数据获取方案，并允许在服务端和客户端上执行相同的代码。此外，redux-api-isomorphic-fetch-middleware 还可以处理多个请求。
安装
你可以通过 npm 包管理工具来安装 redux-api-isomorphic-fetch-middleware。
npm install redux-api-isomorphic-fetch-middleware --save
使用
首先，在你的 Redux createStore() 调用中，你需要对 redux-api-isomorphic-fetch-middleware 进行配置。
import { createStore, applyMiddleware } from 'redux';
import fetchMiddleware from 'redux-api-isomorphic-fetch-middleware';
import rootReducer from './reducers';
const createStoreWithMiddleware = applyMiddleware(fetchMiddleware())(createStore);
const store = createStoreWithMiddleware(rootReducer);现在，你就可以在你的 Redux actions 中使用带有 isomorphic-fetch 的 redux-api-isomorphic-fetch-middleware 了。在你的 Redux action 中创建一个 API 对象，并将其作为第一个参数传递给 fetch() 函数。此外，你还需要指定此操作成功或失败时要调用的动作类型。
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
----- ---------- - -------------
----- ------------------ - ---------------------
----- ------------------ - ---------------------
----- --------- - ------------------------ ---- -- --
---- -
--------- -------------------
------- ------
--
--
----
----- ---------------- - ---------------------------------
----- ---------------- - ---------------------------------
------ -
----------
-----------------
----------------
-每个 API 对象都由一个 endpoint 和 (optional) method 的属性值组成。你也可以在 API 中包含其它的属性，例如 headers 或 body。
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
----- ----------- - --------------
----- ------------------- - ----------------------
----- ------------------- - ----------------------
----- ---------- - ------------------------- ----- -- --
---- -
--------- ----
------- ------
-------- -
-------------- ------- ---------
--
----- -
----- -
--- -
-
-
-
----
----- ----------------- - ----------------------------------
----- ----------------- - ----------------------------------
------ -
-----------
------------------
-----------------
-服务端渲染
redux-api-isomorphic-fetch-middleware 在服务器上也可以正常工作，服务器上的 API 调用将返回 Promise，客户端上的 API 调用则将在组件加载时自动执行。
首先，在你的服务器渲染代码中禁用自动执行 API 调用，并将 API 调用返回的 Promise 传递给模板文件以在客户端加载时执行。
-- -------------------- ---- ------- ------ - -------------- - ---- ------------------- ------ - ------------ --------------- - ---- -------- ------ --------------- ---- ---------------------------------------- ------ ----------- ---- ------------- ------ --- ---- -------- ----- ----- - ------------ ------------ --------------------------------- ------------ ----- --- -- --------------- ---- --------------- -- ----- -------------- - ----------------- ----- ---- - --------------------- ----- --------------------------------- --
在客户端，你需要手动将你的 API 动作调用注入到组件挂载时调用的 componentDidMount() 函数中。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - ---------- - ---- ------------
----- ----- ------- --------- -
------------------- -
-- ------------------- -
------------------------------------
-
-
-------- -
----- - ----- - - -----------
-- -------- -
------ ---------------------
-
------ -
----
----------------- -- -
--- ------------------------------
---
-----
--
-
-
----- --------------- - ------- -- --
------ ----------------
---
----- ------------------ - ---------- -- --------------------
----------
-- ----------
------ ------- --------
----------------
------------------
---------处理异步请求
在应用中同时发起多个异步请求是非常常见的，redux-api-isomorphic-fetch-middleware 可以很好地处理这方面的需求。只需使用逗号分隔即可。如：
-- -------------------- ---- -------
-----------------
-------------- -
--------- ---------
------- ------
--
------------------ -
--------- ------------
------- ------
-
--这里，我们同时为一个名为 MANAGE_USER 的请求和一个名为 MANAGE_PRODUCTS 的请求创建了两个不同 API 对象。使用这些请求就像正常操作一样简单，只需在接受 API 对象参数的函数中指定 MANAGE_USER 或 MANAGE_PRODUCTS。
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- ----- ----------- - -------------- ----- ------------------- - ---------------------- ----- ------------------- - ---------------------- ----- --------------- - ------------------ ----- ----------------------- - -------------------------- ----- ----------------------- - -------------------------- ----- ---------- - -------------------------- ----- ----------------- - ---------------------------------- ----- ----------------- - ---------------------------------- ----- -------------- - ------------------------------ ----- --------------------- - -------------------------------------- ----- --------------------- - -------------------------------------- ------ - ----------- ------------------ ------------------ --------------- ---------------------- --------------------- -
示例
最后，下面为大家展示一个完整的示例代码：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ - ---------------- ------------ --------------- - ---- --------
------ --------------- ---- ----------------------------------------
-- ------ -----
----- ---------- - -------------
----- ------------------ - ---------------------
----- ------------------ - ---------------------
-- --------- ------ -- ------ - ------ -------
----- --------- - ------------------------ -------- -- --
---- -
--------- -----------------------
------- -----
--
------
----
-- ---------------- ------ -- -- ---------- ---- ---------- ----- ----------
----- ---------------- - -------------------------------- ---------- ------- -- --
-----------------
------
----
-- -------------- ------ -- -- ---------- ---- ------------ ----- ---------- ---- -- -----
----- -------------- - -------------------------------- ------- ------- -- --
------
------
----
-- ------ ------- -- ------ --- ------ -----
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ -
---------
---------------- -
---------- -----
----- -----
------ ----
-
--
---- -------------------
------ -
---------
---------------- -
---------- ------
----- ---------------
------ ----
-
--
---- -------------------
------ -
---------
---------------- -
---------- ------
----- -----
------ --------------
-
--
--------
------ ------
-
--
-- ------ - ---- -------
----- ----------- - -----------------
------ -----------
---
-- ----- --- ---------- -- --- -----
----- ----- - ------------
------------
----------------------------------
--
-- ----- ---- ---- ----- -- ------ -------
----------------------------
-------- -- -
----- ----- - -----------------
---------------------------------
--
-------------- -- -
-------------------
---结论
在本文中，我们介绍了 redux-api-isomorphic-fetch-middleware 中的使用和必要配置。同时，我们也展示了如何在客户端和服务端共享管理数据存储器，以提高应用的性能和用户体验，从而帮助你更好地完成你的项目。希望本文可以对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556c281e8991b448d391f