使用 Redux Saga 获取数据

Redux Saga 是一个 Redux 中间件，主要用于管理应用程序的副作用或异步操作，例如获取数据或调用 API。这篇文章将介绍如何使用 Redux Saga 获取数据。

安装

使用以下命令安装 Redux Saga 库：

npm install redux-saga

配置

在 Redux 应用程序中使用 Redux Saga 时，需要在 store 中配置 Redux Saga 中间件。在创建 store 时，使用 applyMiddleware 函数将 redux-saga 中间件传递给 createStore 函数：

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);

上面代码中，createSagaMiddleware() 函数创建一个 middleware，然后在 applyMiddleware 函数中将其作为参数传递给 createStore 函数。最后，使用 sagaMiddleware.run(rootSaga) 函数调用 rootSaga 开始执行异步操作。

创建 Saga

在 Redux Saga 中，应用程序的异步操作被称为“Saga”。每个 Saga 都是一个 Generator 函数，用于在 Redux 应用程序中管理异步操作。

以下是一个获取数据的简单 Saga 示例：

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

function* fetchData() {
  try {
    const data = yield call(fetch, '/data');
    yield put(fetchDataSuccess(data));
  } catch (error) {
    yield put(fetchDataFailure(error));
  }
}

export default function* dataSaga() {
  yield takeEvery(FETCH_DATA_REQUEST, fetchData);
}

上面代码中，fetchData() 函数首先使用 Redux Saga 的 call 函数调用 API，并使用 put 函数将返回值存储到 Redux Store 中。如果调用失败，将使用 put 函数将错误存储到 Redux Store 中。

dataSaga() 函数使用 Redux Saga 的 takeEvery 函数来监听 Redux Action，如果接收到类型为 FETCH_DATA_REQUEST 的 Action，那么将使用 fetchData() 函数来处理该 Action。

发送 Action

可以使用 Redux Action 将数据获取请求发送到 Redux Store 中，如下所示：

import {
  fetchDataRequest,
} from './actions';

store.dispatch(fetchDataRequest());

总结

使用 Redux Saga 可以更容易地管理复杂的应用程序异步操作。将应用程序中的异步操作定义为 Saga，可以将其与 Redux Store 相关联，并且使用 Redux Action 更容易调用。

参考文献：

• Redux Saga 官方文档