随着现代 web 应用程序的复杂性增加，前端开发者需要面对更多数据管理的挑战。Redux 是一个 JavaScript 应用程序状态容器，它可以让你管理应用程序的所有状态。
redux-fetch-action 是一个可用于 Redux 的 npm 包，它可以缩短 Redux 中异步 Action Creator 的编写时间。它将使用 fetch 实现的 HTTP 请求封装成 Redux action，使得使用 Redux 进行状态管理变得更容易。
这篇文章将带领你学习如何在你的 React 应用程序中使用 redux-fetch-action，使得你的应用程序更加轻松地处理异步请求。
安装 redux-fetch-action
运行以下命令来安装 redux-fetch-action：
npm install redux-fetch-action
配置 Redux store
安装 redux-fetch-action 后，你需要在你的 Redux store 中配置它。
import { createStore, applyMiddleware } from 'redux';
import fetchMiddleware from 'redux-fetch-action';
const store = createStore(
reducer,
// 添加 redux-fetch-action middleware
applyMiddleware(fetchMiddleware)
);middleware 将自动拦截与 fetch 相关的 action，并将其转换为异步请求。
定义 Action Creator
下面是一个简单的示例，展示如何使用 redux-fetch-action 创建 Async Action Creator。
import { createAction } from 'redux-fetch-action';
const FETCH_USERS = 'FETCH_USERS';
export const fetchUsers = createAction(FETCH_USERS, () => {
return fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
});createAction 函数，接受两个参数：
- action 的类型
- 在成功访问 API 后返回的数据的 promise
在此示例中，action 类型是 FETCH_USERS，它将发出一个请求到 https://jsonplaceholder.typicode.com/users 并预期响应是一个 JSON 格式的集合。
如果 fetch 请求成功，它将返回一个包含响应体的 promise，reich-action 将会将此响应体传递到 reducer 中用于状态更新。
触发异步请求
通常情况下，我们会在组件中触发异步请求。
我们在组件中使用 connect 函数将 fetchUsers 添加到 Props 然后 dispatch 它。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- -------------------
----- -------- ------- --------- -
------------------- -
----- - ---------- - - -----------
-------------
-
-------- -
----- - ----- - - -----------
----- --------- - -------------- -- -
--- --------------
-----------
-----
---
------ -
----
-----------
-----
--
-
-
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -
----------
--
------ ------- ------------------------ ------------------------------组件调用 fetchUsers 进行异步请求，并在 componentDidMount 生命周期方法中进行请求，当请求完成后，用户数据将会渲染到界面上。
监听请求状态
redux-fetch-action 支持 request 和 success 的状态更新。
我们可以在 reducer 里使用自动生成的 action 类型进行状态更新，在此轻松使用 redux-thunk 处理异步请求中的 request 和 success 状态：
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
----- ------------ - -
------ ---
---------- -----
--
------ ------- -------------- - ------------- ------- -
------ ------------- -
---- ------------
------ ----------------- ------ -
---------- ----
---
---- ----------- - -----------
------ ----------------- ------ -
---------- ------
------ --------------
---
--------
------ ------
-
-Conclusion
在这篇文章中，我们学习了如何使用 redux-fetch-action 更轻松地处理异步请求。你可以在你的 React 应用中使用 redux-fetch-action 并让你的异步请求更容易理解和管理，更加重要的是，使用 redux-fetch-action 能够更加规范地管理 Redux Action Creator。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8ca6