本文共 2098 字，大约阅读时间需要 6 分钟。

redux-saga 是 Redux 应用中处理异步操作的利器，它通过拆分任务为多个saga来管理状态和副作用。以下是关于 Redux Saga 的详细介绍。

1. 基本概念

Redux Saga 提供了一系列函数来协调异步操作，主要包括 delay、all、call、put、takeEvery、takeLatest、fork、cancel 和 select。这些函数帮助开发者更高效地管理应用中的异步流程。

2. 函数解释

1. delay

delay 用于等待一段时间。它接收一个毫秒数为参数，适用于需要延迟操作的场景。

yield delay(1000);

2. all

all 用于同时启动多个saga。它会等待所有saga完成后再继续执行。

yield all([  login(),  watchIncrementAsync()]);

3. call 和 apply

call 和 apply 用于执行异步操作，call 接受目标函数和参数，apply 接受目标函数和参数数组。

let token = yield call(service.home.login, username, password);let token = yield apply(service.home, service.home.login, [username, password]);

4. put

put 类似 Redux 中的 dispatch，用于向 Redux 存储发送动作。

yield put({ type: types.LOGIN_SUCCESS, token });

5. takeEvery 和 takeLatest

takeEvery 用于监听特定类型的动作，并执行对应的saga。它允许多个任务实例同时运行。

yield takeEvery(types.LOGIN_REQUEST, function*({ type, username, password }: Login) {  try {    const state = yield select();    let token = yield call(service.home.login, username, password);    yield put({ type: types.LOGIN_SUCCESS, token });    yield put(push('/logout'));    return token;  } catch (error) {    yield put({ type: types.LOGIN_ERROR, error });  }});

takeLatest 类似 takeEvery，但只允许最后一个启动的任务执行。

yield takeLatest(types.LOGIN_REQUEST, function*({ type, username, password }: Login) {  try {    const state = yield select();    let token = yield call(service.home.login, username, password);    yield put({ type: types.LOGIN_SUCCESS, token });    yield put(push('/logout'));    return token;  } catch (error) {    yield put({ type: types.LOGIN_ERROR, error });  }});

6. fork 和 cancel

fork 用于启动一个新的任务，不阻塞当前任务。cancel 则用于取消已经启动的任务。

yield fork(login, username, password);if (action.type === 'LOGOUT') {  yield cancel(task);}

7. select

select 与 Redux 的 getState 类似，用于获取 Redux 存储的状态。

const state = yield select();

8. take

take 用于监听特定类型的动作，类似于事件订阅。

yield take(types.LOGIN_REQUEST);

3. Sagas 的结构

Redux Saga 的核心是通过多个saga协作完成任务。每个saga 由三部分组成：

1. Worker Saga

• 负责执行具体的任务，如调用 API、处理异步请求等。

2. Watcher Saga

• 监听 Redux 存储中被派发的动作。当检测到特定动作时，会启动对应的 worker saga。

3. Root Saga

• 作为应用的唯一入口，负责启动所有相关的 sagas。

通过合理组织这些saga，可以有效地管理应用中的异步操作流程，提升整体性能和用户体验。

转载地址：http://mvcz.baihongyu.com/