简介
redux-loader 是一个 npm 包，它允许你用更简单的方式将数据从后端加载到 redux store 中。本教程将以一个简单的 React 应用程序为基础，演示如何使用 redux-loader。
安装和设置
在继续之前，请确保你在项目中安装了 redux 和 redux-thunk npm 包。如果没有，请执行以下命令安装。
npm install redux redux-thunk
在你的应用程序中，你需要先引入 redux-thunk，因为 redux-loader 是基于 redux-thunk 进行扩展的。
import thunk from "redux-thunk";
import { createStore, applyMiddleware } from "redux";接下来，你需要安装 redux-loader。
npm install redux-loader
现在，你可以准备好使用 redux-loader。
使用 redux-loader
- 定义 action：
import { createLoaderAction } from "redux-loader";
export const getPosts = createLoaderAction(
"GET_POSTS",
() =>
fetch("https://jsonplaceholder.typicode.com/posts").then((r) => r.json())
);这里通过调用 createLoaderAction 方法来创建一个加载 action，它接受两个参数： actionType 和一个返回 promise 的函数。此函数将在 action 被调用时被调用，并返回一个 promise 对象，该对象将负责加载后端数据。
- 创建 reducer 和 store：
-- -------------------- ---- -------
----- ------------ - -
---------- ------
----- ---
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------------
------ -
---------
---------- -----
--
---- --------------------
------ -
---------
---------- ------
----- ---------------
--
--------
------ ------
-
--
----- ----- - -------------------- ------------------------这是一个简单的 reducer 和 store 的示例，它将加载后的数据存储在 store 中。
- 在 React 组件中调用 action 和使用数据：
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - -------- - ---- ------------
-------- ----- -
----- ----------- ------------- - ---------------
----- -------- - --------------
------------ -- -
---------------------------- -- ---------------------
-- ----
----- ----- - ------------------- -- ------------
------ -
-----
---------- - -
-----------------
- - -
----
----------------- -- -
--- -------------------------------
---
-----
--
------
--
-
------ ------- ----上述代码示例中，我们首先使用 useState 定义一个加载状态 isLoading，并将其设置为 true。接下来，我们使用 useDispatch 钩子来调用 getPosts 方法，并在加载完成后使用 useEffect 钩子将 isLoading 设置为 false。最后，我们使用 useSelector 钩子从 store 中选择加载后的数据，并在加载完成后呈现数据。
总结
使用 redux-loader 可以更轻易地将数据从后端加载到 redux store 中。本教程提供了一个简单的示例，以帮助你开始使用这个 npm 包。使用该教程你可以：
- 安装和设置 redux-loader；
- 创建加载 action；
- 创建 reducer 和 store；
- 在 React 组件中调用 action 和使用数据。
通过使用 redux-loader 和 redux-thunk，你可以更加轻松地加载后端数据，并将它们存储在你的 redux store 中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a7e