使用 Redux 调用 API 的全过程-JavaScript中文网-JavaScript教程资源分享门户

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。代码如下：

// javascriptcn.com 代码示例
import { createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

const initialState = {
  city: '',
  condition: '',
  temperature: '',
  humidity: '',
};

export const weatherSlice = createSlice({
  name: 'weather',
  initialState,
  reducers: {
    setWeather: (state, action) => {
      state.city = action.payload.city;
      state.condition = action.payload.condition;
      state.temperature = action.payload.temperature;
      state.humidity = action.payload.humidity;
    },
  },
});

export const fetchWeather = (city) => (dispatch) => {
  return axios
    .get(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid={YOUR_APP_ID}`)
    .then((response) => {
      const weatherData = {
        city: response.data.name,
        condition: response.data.weather[0].description,
        temperature: response.data.main.temp,
        humidity: response.data.main.humidity,
      };
      dispatch(setWeather(weatherData));
    });
};

export const { setWeather } = weatherSlice.actions;

export default weatherSlice.reducer;

在上面的代码中，我们使用了 createSlice 方法创建了一个 reducer。它还包含一个 setWeather action，该 action 将天气数据的对象传递给 reducer。我们还为 fetchWeather 方法定义了一个 action，该方法使用 axios 发出 HTTP GET 调用。

第三步：使用组件调用 fetchWeather

我们通过组件调用 fetchWeather action，以获取天气数据。我们可以创建一个名为 Weather 的组件，并将以下代码添加到其中：

// javascriptcn.com 代码示例
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchWeather } from './reducers/weather';

const Weather = () => {
  const dispatch = useDispatch();
  const { city, condition, temperature, humidity } = useSelector((state) => state.weather);

  useEffect(() => {
    dispatch(fetchWeather('san francisco'));
  }, [dispatch]);

  return (
    <div>
      <h1>
        {city} Weather
      </h1>
      <p>
        Condition: {condition}
      </p>
      <p>
        Temperature: {temperature}
      </p>
      <p>
        Humidity: {humidity}
      </p>
    </div>
  );
};

export default 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