Redux 是一个流行的 JavaScript 应用程序状态管理器。它不仅用于管理状态，还可以帮助我们轻松地调用 API。
使用 Redux 可以将网络请求与应用程序状态分离，并隔离出错误和其它异常情况。在这篇文章中，我们将学习如何使用 Redux 调用 API。
第一步：添加 Redux
首先，我们需要为应用程序添加 Redux。我们可以使用 npm 从命令行安装 Redux 库。安装方式如下：
npm install redux
然后，我们需要编写 Redux store。创建一个文件 store.js，并将以下代码添加到其中：
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;以上代码使用 createStore 方法创建了 Redux store 实例，并将 rootReducer 作为参数传递给了 createStore。rootReducer 是一个 JavaScript 对象，用于组合多个 reducer。在这里，我们只有一个 reducer。
第二步：添加 Reducer 和 Action
接下来，我们需要添加 reducer 和 action。Reducer 负责处理应用程序状态的变化，而 Action 定义了如何触发这些变化。使用 Redux 调用 API 的全过程中，Reducer 和 Action 扮演着核心角色。
在 src 目录下新建一个 reducers 目录，并创建一个 weather.js 文件。在 weather.js 文件中，我们定义了 reducer 和 action。代码如下：
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
------ ----- ---- --------
----- ------------ - -
----- ---
---------- ---
------------ ---
--------- ---
--
------ ----- ------------ - -------------
----- ----------
-------------
--------- -
----------- ------- ------- -- -
---------- - --------------------
--------------- - -------------------------
----------------- - ---------------------------
-------------- - ------------------------
--
--
---
------ ----- ------------ - ------ -- ---------- -- -
------ -----
------------------------------------------------------------------------------------
---------------- -- -
----- ----------- - -
----- -------------------
---------- -------------------------------------
------------ ------------------------
--------- ----------------------------
--
----------------------------------
---
--
------ ----- - ---------- - - ---------------------
------ ------- ---------------------在上面的代码中，我们使用了 createSlice 方法创建了一个 reducer。它还包含一个 setWeather action，该 action 将天气数据的对象传递给 reducer。我们还为 fetchWeather 方法定义了一个 action，该方法使用 axios 发出 HTTP GET 调用。
第三步：使用组件调用 fetchWeather
我们通过组件调用 fetchWeather action，以获取天气数据。我们可以创建一个名为 Weather 的组件，并将以下代码添加到其中：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ------------ - ---- ---------------------
----- ------- - -- -- -
----- -------- - --------------
----- - ----- ---------- ------------ -------- - - ------------------- -- ---------------
------------ -- -
-------------------------- -------------
-- ------------
------ -
-----
----
------ -------
-----
---
---------- -----------
----
---
------------ -------------
----
---
--------- ----------
----
------
--
--
------ ------- --------在上面的代码中，我们导入了 fetchWeather action，然后在组件内部使用 useSelector 和 useDispatch 钩子。useEffect 钩子会调用 fetchWeather 方法并触发 setWeather action。
总结
使用 Redux 调用 API 需要遵循 Redux 数据流的基本原理。首先添加 Redux、reducer 和 action。然后在组件中调用 useSelector 和 useDispatch 钩子，并触发 fetchWeather action，获取天气数据。
Redux 可以通过分离网络请求和应用状态来简化代码。在这篇文章中，我们学习了如何使用 Redux 调用 API，以及如何在 React 组件中使用它们。希望这篇文章可以帮助你更好地理
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653637ff7d4982a6ebe285e6