如果你是一名前端开发人员，特别是在使用 React 框架进行开发时，你一定已经听说过 Redux，一个用于管理 React 应用程序状态的 JavaScript 库。但是在 Redux 中管理异步请求时，只是使用 Redux-Thunk、Redux-Saga 等 Redux 中间件来处理异步请求并将其发送到后端，通常会变得繁琐和容易出错。这就是为什么 redux-api-middleware-with-list 包很有用，在Redux 应用程序中，它提供了更优雅和简单的异步请求处理方式，并且能够轻松处理列表数据。
安装
首先，我们需要使用 npm在我们的项目中安装 redux-api-middleware-with-list 包。
npm install redux-api-middleware-with-list --save
在 Redux 应用程序中配置 Redux API 中间件
然后，在 Redux 应用程序中配置 Redux API 中间件。我们需要在 applyMiddleware 函数中将 redux-api-middleware-with-list 作为参数传递。
import { createStore, applyMiddleware } from 'redux';
import { apiMiddleware } from 'redux-api-middleware-with-list';
import rootReducer from './rootReducer';
const store = createStore(
rootReducer,
applyMiddleware(apiMiddleware())
);使用示例
假设我们要使用 Redux API 中间件从服务器获取用户的列表。
- 首先，我们需要在操作文件中定义一个函数以处理这个异步操作。让我们称其为 'FETCH_USERS`
export const fetchUsers = () => ({
[API_CALL]: {
endpoint: '/users',
method: 'GET',
types: ['FETCH_USERS_REQUEST', 'FETCH_USERS_SUCCESS', 'FETCH_USERS_FAILURE'],
list: true, // 列表数据
},
});在 actions 的 types 中包含了三个常量，表示开始请求，请求成功和请求失败。
- 接下来，我们需要在 reducers 中定义一个 Reducer 函数来处理我们的请求动作。这个 Reducer 函数会接收到一个名为 'FETCH_USERS_RESPONSE' 的 action，这个action 会包含请求成功后从服务器返回的用户信息列表。
-- -------------------- ---- -------
------ - ------------------- - ---- -------------------
----- ------------ - -
------ ---
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------------
------ - --------- ------ -------------- --
--------
------ ------
-
--
------ ------- ------------- 在我们的 React 组件中，我们需要使用 fetchUsers 函数从服务器获取用户列表。我们可以使用 mapDispatchToProps 函数来定义将 fetchUsers 函数映射到我们的组件中。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------- - ---- -------------
----- -------- ------- --------- -
------------------- -
------------------------
-
-------- -
-- --------
-
-
----- ------------------ - -
----------- -- - ---------- ---------
--
------ ------- ------------- ------------------------------结论
使用 Redux API 中间件可以更加优雅和简单地处理异步请求，并且能够轻松处理列表数据。而 redux-api-middleware-with-list 可以进一步简化使用 Redux API 中间件的过程，提供更完整的异步数据管理支持。在开发复杂的 React 应用程序时，这个包将会非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8d81e8991b448d92fd