Redux 是一个非常流行的 JavaScript 应用程序状态管理器，它提供了一种方便的方法来处理应用程序状态的变化，但在一些应用中，需要处理加载的数据，并在加载期间显示某些内容，这就需要一个 loading 状态。redux-entities-loading 正是为此而设计。
什么是 redux-entities-loading？
redux-entities-loading 是一个为 Redux 应用程序提供 loading 状态的 npm 包。它允许您定义 loading 状态和相关的实体，然后将其添加到 Redux Store 中。您可以通过使用 API 获得当前加载状态，并控制整个应用程序的行为。
在应用中很常见的是加载数据，但加载每个数据都要写一遍 loading 状态是很麻烦的，这时候就用到了 redux-entities-loading。它允许您为每个实体添加 loading 状态，以及关联这些实体的 loading 状态。这样，您就可以在加载实体时更新整个应用程序的状态。
安装 redux-entities-loading
要安装 redux-entities-loading，请使用 npm：
npm install redux-entities-loading --save
如何使用 redux-entities-loading
在这里，我们将学习如何使用 redux-entities-loading。我们将定义两个实体：user 和 post。首先，我们需要创建一个 reducer，该 reducer 将处理 loading 状态的变化。
import { combineReducers } from 'redux'
import { loadingReducer } from 'redux-entities-loading'
const entitiesReducer = combineReducers({
users: usersReducer,
posts: postsReducer,
loading: loadingReducer,
})现在，我们需要定义我们两个实体的 action，它们将负责加载数据时显示 loading 状态，数据加载完成后使 loading 状态消失。
import { createLoadingAction } from 'redux-entities-loading'
export const loadUsers = () => createLoadingAction('users', request.get('/users'))
export const loadPosts = () => createLoadingAction('posts', request.get('/posts'))现在，我们可以使用这些 action 在我们的组件中加上 loading 效果。
-- -------------------- ---- -------
-------- ------- -
------------ -- -
---------------------
-- ---
----- ----- - ----------------- -- ------------
-- ---------------------------------- --------- -
------ ---------------------
-
------ -
----
- -------------- -- ----- --------- ------- -
-----
-
-这样，我们的应用程序现在就具有了简单且易于使用的 loading 功能。
示例代码
让我们来看一个完整的例子，它演示了如何使用 redux-entities-loading 来加载 user 数据。
reducer.js
-- -------------------- ---- -------
------ - --------------- - ---- -------
------ - -------------- - ---- ------------------------
----- --------------- - -----------------
------ -------------
-------- ---------------
--
-------- ------------------ - --- ------- -
------ ------------- -
---- ----------------
------ --------------
--------
------ -----
-
-
------ ------- ---------------action.js
import { createLoadingAction } from 'redux-entities-loading'
import request from 'request'
export const loadUsers = () => createLoadingAction('users', request.get('/users'))Users.js
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - ------------ ----------- - ---- -------------
------ - --------- - ---- -----------
------ - ---------------- - ---- ------------------------
-------- ------- -
----- -------- - -------------
------------ -- -
---------------------
-- ---
----- ----- - ----------------- -- ------------
-- ---------------------------------- --------- -
------ ---------------------
-
------ -
----
- -------------- -- ----- --------- ------- -
-----
-
-
------ ------- -----总结
redux-entities-loading 是一个强大和易于使用的 Redux 库，它为我们提供了一种方便地管理应用程序加载状态的方法。在使用中请注意，它只是一个帮助你更好地管理 loading 状态的工具，你仍然需要自己思考你的数据结构以及如何处理异步操作。希望这篇文章对学习 redux-entities-loading 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005542a81e8991b448d17dc