在现代 web 应用开发中，Redux 是一个非常流行的 web 应用开发框架。而 redux-loading-middleware 是一个 Redux 中间件，它可以帮助你控制页面加载状态，为用户提供更好的用户体验。在这篇文章中，我们将学习如何使用 redux-loading-middleware。
前置技能
本教程假设读者：
- 已经掌握了 React 和 Redux 基本概念。
- 对 Redux Middleware 有一定的了解。
安装
要使用 redux-loading-middleware ，使用 npm 将它添加到你的项目中。
npm install redux-loading-middleware --save
配置
使用 redux-loading-middleware ，你需要在你的 Redux store 中添加它作为一个 middleware 。为此，请参照以下步骤。
- 引用项目中的
redux-loading-middleware。
在 store.js 中：
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducers'
import loadingMiddleware from 'redux-loading-middleware'- 使用你的 Redux 中间件，在
applyMiddleware中添加loadingMiddleware即可。
const store = createStore(
rootReducer, // 声明 rootReducer
applyMiddleware(
loadingMiddleware,
/* 其他中间件 */
)
)开始使用
现在，我们已经在 Redux Store 中添加了中间件，接下来让我们更改我们的 Action 在每次 dispatch 前或者返回结果后更新 loading 状态。
在我们的 Action 中，添加中间件 loading 。例如，我们要从服务器获取用户信息时，可以这样写 getUser() 函数。
-- -------------------- ---- -------
------ ----- ------- - -- -- -
------ ---------- -- -
----------
----- -----------
-------- ----- -- ----------------- ----
--
-- --------------------- ------- - -----
------------- -- -
----------
----- -----------
----- -
----- ------
---- ---
--
-------- ------ -- ----------------- -----
--
-- -----
-
-每次执行该 Action 时，都会带有 loading 状态给 reducer ，让 reducer 知道当前的获取过程是否结束。
最后，将 loadingReducer 加入 Redux store：
store.js
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ ----------- ---- ------------
------ ----------------- ---- --------------------------
----- ----- - ------------
------------ -- -- -----------
----------------
------------------
-- ----- --
-
-
-- -- -------------- - -----------
------ - -------------- - ---- --------------------------
----- ----------- - -----------------
-- -- -------
-------- ---------------
--示例代码
最后，为了更好地说明使用细节，附上完整的示例代码：
loadingMiddleware.js
-- -------------------- ---- -------
----- ----------- - --------------
----- -------------- - -----------------
------ ----- ---------- - -------- -- --
----- ------------
----- -
-------
--
---
------ ----- ------------- - -------- -- --
----- ---------------
----- -
-------
--
---
---
- ----- ---------- ---- ------ - ------- ---
- --------- --------------- -------
--
------ ------- -------- ----------------------- ---------- - ------ -
----- ------------ - ---
------ -- -------- -- -- -
------ - ---- - -- - ------ - -- -
----- - ----- ------- - - -------
-- -------------------
-- - ------ ------- --- ----------- - -
------ -------------
-
-- ------------- ------- ------ -------
-- --------------------------- -
-- - --------- - -
-- - - ------------------ ----------- -- ----------- -- ------ - - -
--------------------------
-----------------------------
-
- ---- -
-----------------------------
-
- ---- -- -------------------------- -- -------------------------- -
-- ----------- -
------------------------------------------------------ -- ----------- -- -------- ---
-- ------------------------------- -- --------------------------------------- -
--------------------------------
-
- ---- -
--------------------------------
-
- ---- -
------ -------------
-
--
--
-userAction.js
-- -------------------- ---- -------
------ ----- ------- - -- -- -
------ ---------- -- -
----------
----- -----------
-------- -----
--
-- --------------------- ------- - -----
------------- -- -
----------
----- -----------
----- -
----- ------
---- ---
--
-------- ------
--
-- -----
-
-userReducer.js
-- -------------------- ---- -------
----- --------- - -
----- ---
-------- ---
-
------ ----- ----------- - ------ - ---------- ------- -- -
------ ------------- -
---- -----------
------ - --------- -------- - ----------------- -------- -------------- - -
---- -----------
------ - --------- ----- ------------ -------- - ----------------- -------- -------------- - -
--------
------ -----
-
-appReducer.js
import { userReducer } from './userReducer'
import { loadingReducer } from '../middlewares/loadingMiddleware'
export const appReducer = combineReducers({
user: userReducer,
loading: loadingReducer
})最后，我们只需要使用 React 组件 <Loading> 将 loading 控制在页面层面，例如：
Loading.js
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
----- ------- ------- --------- -
------ -- -
----- - ------- - - ------------------
-- --------- -
------ ---------------------
-
------ ----
-
-
----- --------------- - ----- -- --
-------- --------------
--
------ ------- ---------------------------------总结
在本文中，我们学习了如何使用 redux-loading-middleware 中间件来控制页面的加载状态。我们学习了如何添加 loadingMiddleware 中间件到 Redux store 中，以及如何在 Action 中使用 loading 状态来进行控制。我们还演示了完整的示例代码。现在，你可以在你的 React Web 应用程序中使用这个中间件了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a8e