跳到主要内容

Redux 异步操作

在 React 应用中，Redux 是一个非常流行的状态管理工具。然而，Redux 本身是同步的，这意味着它无法直接处理异步操作，例如从 API 获取数据或执行延迟任务。为了解决这个问题，我们需要使用中间件（middleware）来扩展 Redux 的功能。本文将介绍如何在 Redux 中处理异步操作，并展示如何使用 Redux Thunk 和 Redux Saga 来实现这一目标。

什么是 Redux 异步操作？​

Redux 的核心是一个同步的状态管理工具。当我们需要处理异步操作时，例如从服务器获取数据或执行定时任务，Redux 本身无法直接处理这些操作。为了处理异步操作，我们需要使用中间件来扩展 Redux 的功能。

常见的 Redux 异步操作中间件包括：

  • Redux Thunk：允许 action creators 返回一个函数而不是一个 action 对象。
  • Redux Saga：使用 ES6 的生成器函数来处理复杂的异步操作。

接下来，我们将详细介绍如何使用这些中间件来处理异步操作。

使用 Redux Thunk 处理异步操作​

Redux Thunk 是 Redux 中最常用的异步操作中间件之一。它允许 action creators 返回一个函数而不是一个 action 对象。这个函数可以执行异步操作，并在操作完成后 dispatch 一个 action。

安装 Redux Thunk​

首先，我们需要安装 Redux Thunk：

bash
npm install redux-thunk

配置 Redux Thunk​

在 Redux store 中配置 Redux Thunk：

javascript
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

创建异步 Action Creator​

接下来，我们可以创建一个异步的 action creator。这个 action creator 返回一个函数，该函数可以执行异步操作并在操作完成后 dispatch 一个 action。

javascript
export const fetchData = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_DATA_FAILURE', error });
    }
  };
};

在组件中使用异步 Action​

最后，我们可以在 React 组件中使用这个异步 action：

javascript
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';

const DataComponent = () => {
  const dispatch = useDispatch();
  const { data, loading, error } = useSelector(state => state.data);

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default DataComponent;

使用 Redux Saga 处理异步操作​

Redux Saga 是另一个流行的 Redux 异步操作中间件。它使用 ES6 的生成器函数来处理复杂的异步操作。Redux Saga 非常适合处理需要复杂控制流的异步操作，例如取消任务、并行执行任务等。

安装 Redux Saga​

首先，我们需要安装 Redux Saga：

bash
npm install redux-saga

配置 Redux Saga​

在 Redux store 中配置 Redux Saga：

javascript
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(rootSaga);

创建 Saga​

接下来，我们可以创建一个 Saga 来处理异步操作。Saga 使用生成器函数来定义异步操作。

javascript
import { call, put, takeEvery } from 'redux-saga/effects';
import { fetchDataSuccess, fetchDataFailure } from './actions';
import { FETCH_DATA_REQUEST } from './actionTypes';

function* fetchDataSaga() {
  try {
    const response = yield call(fetch, 'https://api.example.com/data');
    const data = yield response.json();
    yield put(fetchDataSuccess(data));
  } catch (error) {
    yield put(fetchDataFailure(error));
  }
}

function* watchFetchData() {
  yield takeEvery(FETCH_DATA_REQUEST, fetchDataSaga);
}

export default function* rootSaga() {
  yield all([
    watchFetchData()
  ]);
}

在组件中使用 Saga​

最后，我们可以在 React 组件中使用这个 Saga：

javascript
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchDataRequest } from './actions';

const DataComponent = () => {
  const dispatch = useDispatch();
  const { data, loading, error } = useSelector(state => state.data);

  useEffect(() => {
    dispatch(fetchDataRequest());
  }, [dispatch]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default DataComponent;

实际案例​

假设我们正在开发一个天气应用，需要从 API 获取天气数据并显示在页面上。我们可以使用 Redux Thunk 或 Redux Saga 来处理这个异步操作。

使用 Redux Thunk 的案例​

javascript
export const fetchWeather = (city) => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_WEATHER_REQUEST' });

    try {
      const response = await fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`);
      const data = await response.json();
      dispatch({ type: 'FETCH_WEATHER_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_WEATHER_FAILURE', error });
    }
  };
};

使用 Redux Saga 的案例​

javascript
import { call, put, takeEvery } from 'redux-saga/effects';
import { fetchWeatherSuccess, fetchWeatherFailure } from './actions';
import { FETCH_WEATHER_REQUEST } from './actionTypes';

function* fetchWeatherSaga(action) {
  try {
    const response = yield call(fetch, `https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${action.payload}`);
    const data = yield response.json();
    yield put(fetchWeatherSuccess(data));
  } catch (error) {
    yield put(fetchWeatherFailure(error));
  }
}

function* watchFetchWeather() {
  yield takeEvery(FETCH_WEATHER_REQUEST, fetchWeatherSaga);
}

export default function* rootSaga() {
  yield all([
    watchFetchWeather()
  ]);
}

总结​

在 Redux 中处理异步操作是开发复杂 React 应用的关键技能。通过使用 Redux Thunk 或 Redux Saga，我们可以轻松地处理异步操作，并在操作完成后更新应用的状态。Redux Thunk 适合处理简单的异步操作，而 Redux Saga 则适合处理复杂的异步操作。

附加资源​

练习​

  1. 使用 Redux Thunk 实现一个简单的计数器应用，支持异步增加和减少计数。
  2. 使用 Redux Saga 实现一个简单的待办事项应用，支持异步添加和删除待办事项。

通过完成这些练习，你将更好地理解如何在 Redux 中处理异步操作。