前言
在前端开发中，状态管理是一个非常重要的话题。Redux 是一个流行的状态管理工具，它可以帮助我们以可预测的方式管理应用程序的状态。但是在使用 Redux 的时候，有时候我们需要向后台请求数据，然后才能更新应用程序的状态。这时候就需要使用 redux-obtain 这个 npm 包来帮助我们。
redux-obtain 是一个用于 Redux 的中间件，它可以帮助我们管理数据请求。在使用 redux-obtain 的过程中，你可以很方便地请求数据，并将数据保存到 Redux store 中。这篇文章将会介绍如何安装和使用 redux-obtain，希望对你有所帮助。
安装
如果你还没有安装 Redux，需要先安装 Redux。可以使用以下命令安装 Redux：
npm install redux --save
接着，需要安装 redux-obtain。可以使用以下命令安装 redux-obtain：
npm install redux-obtain --save
使用
使用 redux-obtain 可以分为三个步骤：
- 创建 action
- 创建 reducer
- 创建组件
下面我们逐步介绍这三个步骤。
创建 Action
redux-obtain 中的 action 与 Redux 中的 action 类似。因此，我们首先需要创建一个 action。如下所示：
import { OBTAIN } from 'redux-obtain';
const requestUser = () => ({
type: OBTAIN('GET_USER'),
url: '/api/user'
});上面的代码中，我们创建了一个 requestUser 的方法。这个方法返回一个对象，其中包含两个属性，type 和 url。type 属性的值是 OBTAIN('GET_USER')。这里的 GET_USER 是一个 action 类型常量，它会在 reducer 中被用到。url 属性的值是你要请求的 API 的 URL。
创建 Reducer
接下来，我们需要创建 reducer。与 Redux 中的 reducer 类似，我们需要根据 action 的类型来更新应用程序的状态。如下所示：
-- -------------------- ---- -------
------ - --------------- -------------- - ---- ---------------
----- ------------ - -
----- -----
---------- ------
------ ----
-
----- ----------- - ------ - ------------- ------- -- -
------------------- -
---- ---------------------------
------ -
---------
---------- ------
----- --------------
--
---- ---------------------------
------ -
---------
---------- ------
------ --------------
--
--------
------ ------
-
-上面的代码中，我们首先定义了一个名为 initialState 的常量，它包含了应用程序的初始状态。接下来，我们创建了一个名为 userReducer 的方法，它接收两个参数：state 和 action。在返回值中，我们使用 switch 语句根据 action 的类型来更新应用程序的状态。OBTAIN_SUCCESS 和 OBTAIN_FAILURE 代表成功和失败的 action 类型。
在上面的代码中，对应着 requestUser action 中的 GET_USER。
创建组件
最后，我们需要创建组件，并将 action 和 reducer 结合起来。如下所示：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ----------- - ---- ----------------
----- ------------- - -- -- -
----- -------- - --------------
----- ---- - ----------------- -- ------------
----- --------- - ----------------- -- -----------------
----- ----- - ----------------- -- -------------
------------ -- -
------------------------
-- ----
------ -
-----
---------- -- ----------------------
------ -- -------------------
----- -- -
-----
----------------------
-----------------------
------
--
------
--
-
------ ------- --------------上面的代码中，我们首先使用 useSelector hook 从 store 中获取应用程序的状态。接着，我们使用 useEffect hook 发起数据请求，并且将请求结果保存到 Redux store 中。最后，我们根据应用程序的状态来渲染组件。
总结
在这篇文章中，我们介绍了如何使用 redux-obtain 来管理数据请求。使用 redux-obtain 可以帮助我们更方便地请求数据，并将数据保存到 Redux store 中。在应用程序的开发过程中，我们经常需要处理异步数据请求，因此掌握 redux-obtain 的使用方法是非常重要的。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c2c