Redux-Saga：Redux 中间件的异步处理

慕仲卿
2,161 阅读8分钟

Redux 是一个流行的 JavaScript 状态管理库，用于构建大型应用程序。Redux 保持状态的不可变性和单一数据源的原则，但同时也引入了对异步操作处理的额外需求。Redux-Saga 作为 Redux 的中间件，专门用于解决 Redux 中的异步流程管理问题。

1. 设计哲学

Redux-Saga 的设计哲学基于几个核心概念：

  1. Saga：Saga 是 Redux-Saga 中的基本概念，表示一个异步流程。Saga 像一个独立运行的任务，可以发起异步调用并触发 Redux actions。
  2. Effect：Saga 通过 effects 来描述异步操作和执行副作用。Effects 是普通对象，描述 Saga 应该如何执行。
  3. Watchers：Saga 中的 watchers 是启动 Sagas 的函数，它们监听特定的 actions 并开始执行相关的 Saga。
  4. Generator Functions：Sagas 使用 generator 函数编写，这使得异步流程可以以同步的方式表达。

2. 原理

Redux-Saga 使用 ES6 的 generator 函数来创建 Sagas。Generator 函数允许你在函数执行中暂停和恢复，这非常适合表达异步流程。Saga 运行时会监听 generator 函数的每一步执行，当 generator 函数等待某个异步操作完成时，Saga 运行时会将控制权交还给 JavaScript 引擎，直到异步操作完成。

3. 使用方法

  1. 安装：

    npm install redux-saga

  2. 基本使用： 首先，你需要创建 Sagas，它们是监听 actions 并触发异步操作的 generator 函数。

    import { call, put, takeEvery } from 'redux-saga/effects';

function* fetchData(action) {
  try {
    const data = yield call(Api.fetchData, action.payload);
    yield put({ type: 'FETCH_DATA_SUCCESS', data });
  } catch (error) {
    yield put({ type: 'FETCH_DATA_FAILURE', error });
  }
}

// 创建一个 Saga 监听 FETCH_DATA action 并调用 fetchData
function* watchFetchData() {
  yield takeEvery('FETCH_DATA', fetchData);
}

    然后，你需要在 Redux store 中运行 Sagas。

    import createSagaMiddleware from 'redux-saga';
import { fetchData, watchFetchData } from './sagas';

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

sagaMiddleware.run(watchFetchData);

4. 适用场景

Redux-Saga 适用于以下场景：

  1. 复杂的异步流程：需要顺序执行多个异步操作。
  2. 竞态条件：需要处理多个异步操作之间的竞态条件。
  3. 取消操作：需要取消不再需要的异步操作。
  4. 响应服务器回调：需要根据服务器的回调执行复杂的客户端逻辑。

5. 代码示例

假设我们有一个获取用户数据的 Saga：

// actions.js
export const FETCH_USER = 'FETCH_USER';
export const FETCH_USER_SUCCESS = 'FETCH_USER_SUCCESS';
export const FETCH_USER_FAILURE = 'FETCH_USER_FAILURE';

// sagas.js
import { call, put, takeLatest } from 'redux-saga/effects';
import { FETCH_USER, FETCH_USER_SUCCESS, FETCH_USER_FAILURE } from './actions';

function fetchUserApi(id) {
  return fetch(`/api/user/${id}`).then(response => response.json());
}

function* fetchUserSaga(action) {
  try {
    const user = yield call(fetchUserApi, action.payload);
    yield put({ type: FETCH_USER_SUCCESS, user });
  } catch (error) {
    yield put({ type: FETCH_USER_FAILURE, error });
  }
}

function* watchFetchUser() {
  yield takeLatest(FETCH_USER, fetchUserSaga);
}

// store.js
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import { watchFetchUser } from './sagas';

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

sagaMiddleware.run(watchFetchUser);

export default store;

在这个例子中，我们定义了 FETCH_USER 相关的 actions，创建了一个 fetchUserSaga Saga 来处理异步数据获取，并通过 watchFetchUser Saga 监听 FETCH_USER action。最后，在创建 Redux store 时，我们运行了 watchFetchUser Saga。

6. 优缺点

6.1 优点

  1. 易于测试：由于 Sagas 使用 generator 函数，它们可以很容易地进行单元测试。
  2. 更好的异步流程控制：Sagas 允许开发者以更直观和结构化的方式处理异步逻辑。
  3. 灵活的中间件：Sagas 可以被设计为可重用的中间件，方便在多个地方使用。
  4. 响应式：Sagas 可以响应其他 Sagas 或 actions，提供复杂的响应式逻辑。

6.2 缺点

  1. 学习曲线：Redux-Saga 的概念和 API 可能需要一些时间来学习和理解。
  2. 复杂性：对于简单的异步操作，使用 Sagas 可能会引入不必要的复杂性。
  3. 调试难度：虽然 Redux-Saga 提供了调试工具，但 generator 函数的调试仍然比普通函数复杂。

7. Redux-Saga Effects 详解

Redux-Saga 通过 effects 来描述副作用和异步操作。Effects 是普通 JavaScript 对象，它们由 Redux-Saga 提供的 API 创建，Saga 运行时会解析并执行这些 effects。以下是 redux-saga/effects 中一些核心 exports 的详细说明：

确实，all 是 Redux-Saga 中一个非常重要的 effect，用于等待多个异步操作完成。以下是对 all effect 的补充说明：

7.0 all

all effect 用于并行执行多个 effects，并且等待它们全部完成。这在需要同时发起多个异步调用并处理所有结果时非常有用。

import { call, all } from 'redux-saga/effects';

function* fetchUsers() {
  const users = yield all([
    call(fetchUserApi, 'users/1'),
    call(fetchUserApi, 'users/2'),
    // ...更多调用
  ]);

  // 'users' 是一个数组，包含了所有调用的返回值
  // 顺序与发起调用的顺序一致
}

在上述示例中，all effect 会并行地执行所有 call effect，并等待它们全部完成。完成后，users 数组将包含每个 call effect 的结果，且结果的顺序与发起调用的顺序一致。

a. 使用场景

all effect 适用于以下场景：

  1. 并行处理多个异步操作：当你需要同时从多个服务获取数据时。
  2. 顺序无关：所有异步操作的结果不需要按照特定顺序处理。
  3. 聚合结果：需要将多个异步操作的结果聚合为一个单一的结果对象或数组。

b. 注意事项

使用 all effect 时，需要注意以下几点：

  • 错误处理：如果 all 中的任何一个 effect 抛出错误，整个 all effect 将立即失败，并且错误将传递给包含它的 Saga。这意味着你需要在调用 all 的 Saga 中进行错误处理。
  • 性能考虑：虽然 all 可以并行执行多个异步操作，但如果这些操作数量过多，可能会对性能产生影响。应当根据实际情况合理使用。

c. 示例

下面是一个使用 all 的完整示例：

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

function* fetchDataSaga() {
  try {
    const results = yield all([
      call(fetchApi, '/api/data1'),
      call(fetchApi, '/api/data2'),
      // 可以添加更多 API 调用
    ]);

    // 假设所有的 API 调用都返回了一个数据数组
    yield all(results.map(result => put(fetchDataSuccess(result))));
  } catch (error) {
    yield put(fetchDataFailure(error));
  }
}

// 在 watch 函数中监听相应的 action 并启动 fetchDataSaga

在这个示例中，我们首先尝试并行地从两个 API 获取数据。如果所有调用都成功，我们对每个结果调用 fetchDataSuccess action。如果任何一个调用失败，我们通过 fetchDataFailure action 报告错误。

all effect 是 Redux-Saga 中处理并行异步操作的强大工具，它使得 Saga 代码更加简洁和高效。

7.1 call

call effect 用于发起一个异步调用，如一个 HTTP 请求或者任何返回 Promise 的函数。

function* fetchData() {
  const data = yield call(Api.fetchData, 'someId');
}

7.2 put

put effect 用于将一个 action 对象传递给 Redux store 的 reducer，从而改变应用的状态。

yield put({ type: 'DATA_LOADED', data });

7.3 takeEvery / takeLatest

takeEvery 和 takeLatest 都是 Saga 助手，用于监听特定的 actions 并触发其他 Sagas。

  • takeEvery：为每个触发的 action 创建一个 Saga 任务。
  • takeLatest：取消之前触发的任务，只为最新的 action 创建任务。
// takeEvery
function* watchFetchData() {
  yield takeEvery('FETCH_DATA', fetchData);
}

// takeLatest
function* watchFetchData() {
  yield takeLatest('FETCH_DATA', fetchData);
}

7.4 all / race

all 和 race 用于组合多个 effects。

  • all：等待所有 effects 完成。
  • race：等待第一个完成的 effect。
// all
const results = yield all([
  call(fetchData, 'id1'),
  call(fetchData, 'id2'),
]);

// race
const result = yield race({
  a: call(fetchData, 'id1'),
  b: call(fetchData, 'id2'),
});

7.5 fork / join

fork 和 join 用于处理 Saga 的并发。

  • fork：启动一个 Saga 任务，但不等待它完成。
  • join：等待之前用 fork 启动的 Saga 任务完成。
// fork
yield fork(fetchDataSaga, 'id1');

// join (需要引入 effects中的 join 或者来自 sagaHelpers）
const result = yield join(taskId);

7.6 cancel / cancelled

  • cancel：取消一个用 fork 启动的 Saga 任务。
  • cancelled：检查当前的 Saga 是否被取消。
try {
  yield fork(function* () {
    while (true) {
      // 执行一些操作
    }
  });

  yield cancelled(); // 如果这里执行，Saga 将被取消
} catch (error) {
  if (error === CANCEL) {
    // 处理取消逻辑
  }
}

7.7 select

select effect 用于获取 Redux store 中的一部分状态。

const state = yield select((state) => state.someSlice);

7.8 getContext / setContext

getContext 和 setContext 用于访问和修改 Saga 运行时的上下文。

const token = yield getContext('token');

yield setContext({ token: 'newToken' });

7.9 delay

delay effect 用于在 Saga 中添加一个时间延迟。

yield delay(1000); // 暂停 Saga 1 秒

7.10 flush

flush effect 用于清空一个 channel 中的所有消息。

const channel = new Channel();

// 稍后某个地方
yield flush(channel);

Redux-Saga 的 effects 为处理复杂的异步流程提供了强大的工具集。通过这些 effects，开发者可以以声明式的方式描述异步操作，使 Sagas 代码更加清晰和易于管理。同时，Redux-Saga 的 effects 也使得 Sagas 的测试变得更加容易，因为它们都是纯函数。

8. 结论

Redux-Saga 是处理 Redux 中异步流程的强大工具。它提供了一种结构化和可预测的方式来管理复杂的异步逻辑。虽然它有学习曲线和调试上的挑战，但它的优点使其成为大型和复杂 Redux 应用的首选解决方案。通过 Sagas，开发者可以编写更清晰、更可维护的异步代码，这对于维护大型应用程序至关重要。

avatar
文章
阅读
粉丝