前言
在开发现代化的 Web 应用程序时，将数据存储远离视图层是最佳实践之一。当前，使用数据管理库来管理应用程序状态已经成为前端开发的主流方式。然而，在数据请求和状态管理方面，React/Redux 应用程序往往会出现一些问题。这时，一个叫做 redux-data-loader 的 npm 包可以帮到你。
本文将讲述如何使用 redux-data-loader 来管理数据加载和状态更新。通过一个例子，读者不仅可以理解如何使用它，还可以了解如何将其整合到 Redux 中。
什么是 redux-data-loader
redux-data-loader 这个 npm 包使我们能够管理数据加载的状态。它在加载之前提供了加载动画，在加载过程中提供了加载状态，并在加载结束时提供了成功回调或错误回调。
我们以一个例子来阐述其使用细节。
安装和引用
首先你需要在你的项目中安装 redux-data-loader，在控制台中输入以下命令：
npm install redux-data-loader --save
添加以下引用，用于将 reduxDataLoaderMiddleware 添加到 Redux store 中：
import { applyMiddleware, createStore } from 'redux';
import { reduxDataLoaderMiddleware } from 'redux-data-loader';
const store = createStore(reducer, applyMiddleware(reduxDataLoaderMiddleware()));例子
假设我们正在构建这样的一个应用，获取用户信息并将其储存到 Redux Store：
UserProfile页面加载时从/api/users/:id获取用户数据。当用户通过表单进行更新时，页面会发送数据到
/api/users/:id，并且应该在请求结束后更新数据。
现在就让我们看看如何使用 redux-data-loader 来解决上述问题：
import axios from 'axios';
import { configureLoaderActionCreators, reduxDataLoaderReducer } from 'redux-data-loader';首先，我们需要一个 API 函数来获取数据和更新数据。
export function getUserProfile(id) {
return axios.get(`/api/users/${id}`);
}
export function updateUserProfile(id, userData) {
return axios.put(`/api/users/${id}`, userData);
}然后，我们需要创建一个 loaderType，并生成一个相关的 actionCreators。
const loaderType = 'userProfileLoader';
const {
loadData: loadUserProfile,
updateData: updateUserProfileLocally,
errorData: errorUserProfile,
noLoader: userProfileNoLoader,
} = configureLoaderActionCreators(loaderType);下一步，我们需要手动处理我们的 API 请求，将结果传递给 loadData 和 errorData。这些 action 返回 redux-data-loader 中的 action，并在我们的 reducer（reduxDataLoaderReducer）中自动更新我们的状态。
-- -------------------- ---- -------
------ -------- -------------------- -
------ ----- ---------- -- -
----------------------------
--- -
----- - ---- - - ----- -------------------
--------------------------------
- ----- ----- -
----- - ------- ---- - - ------------ -- ---
--------------------------------- -------
-
--
-我们能够在我们的页面组件中轻松地将数据连接到 UserProfile 组件上：
-- -------------------- ---- ------- ------ - ------- - ---- -------------- ------ - ----------------- ----------------- - ---- ----------------------- ------ - ------------------- - ---- ----------------------- ------ - --------------- - ---- ---------------------------------- ------ ------ ---- -------------------------- -------- ------------- -------- ------ ----- --------------------- -- - -- ---- - ----- ------------------ - ---------- -- -- ----------------- ---- -- ------------------------------- ------------------ ---- --------- -- ------------------------------ ----------- --- ----- --------------- - -- ------------------- ------------- -- -- -- ----- ------------------------ -------- ---------------------------------------------------------- ------ -------------------------------------------------------- --- ------ ------- ------------------------ ---------------------------------
最后，当我们要更新我们的数据时，我们只需简单地调用 updateData 方法并更新我们的本地状态；更改后将发送 api 请求并自动更新我们的数据。
-- -------------------- ---- -------
------ -------- --------------------- --------- -
------ ----- ---------- -- -
---------------------------------------------
--- -
----- - ---- - - ----- --------------------- ----------
--------------------------------
- ----- ----- -
----- - ------- ---- - - ------------ -- ---
--------------------------------- -------
-
--
-总结
使用 redux-data-loader 能够使我们在请求数据时更加快速和可靠。不仅本文提供了对它的使用说明，同时还对如何将其与 Redux 整合作了简单的说明。我们相信这能够帮助您更好地完成数据管理方面的任务。
示例代码已上传到 GitHub，欢迎查看，如果这个代码库有任何问题或遗漏，欢迎在 Issues 中提出，我们将尽快完善。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560d881e8991b448df1af