Redux-Saga 经典问题有哪些以及解决方案（React）

在 React 应用中，管理状态是一个常见的挑战，目前流行的解决方案之一是 Redux ，Redux-Saga 则是一个常见的 Redux 中间件，用于处理副作用（例如异步请求等）。

在使用 Redux-Saga 的过程中，我们可能会遇到一些经典问题，本文将介绍这些问题并提供解决方案，希望能够帮助你更好地使用 Redux-Saga。

问题一：如何处理异步请求？

Redux-Saga 的主要功能是处理副作用，如异步请求。一般来说，我们的异步请求代码可能长这样：

const fetchUser = async (userId) => {
  try {
    const response = await fetch(`/api/user/${userId}`);
    const user = await response.json();
    return user;
  } catch (e) {
    console.log('Error', e);
  }
};

但是在 Redux 中，我们不能直接修改状态，而是需要使用 Action、Reducer 等机制来处理。Redux-Saga 提供了一个方便的方法来处理异步请求：

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

// worker Saga: 将异步操作放在 Generator 内部
function* fetchUser(action) {
  try {
    const user = yield call(fetch, `/api/user/${action.payload}`);
    yield put({ type: 'USER_FETCH_SUCCEEDED', user });
  } catch (e) {
    console.log('Error', e);
    yield put({ type: 'USER_FETCH_FAILED', message: e.message });
  }
}

// watcher Saga: 每个 FETCH_USER action 都将触发 worker
function* watchFetchUser() {
  yield takeEvery('FETCH_USER', fetchUser);
}

在上面的代码中，我们首先定义了一个 worker 函数 fetchUser ，这个函数通过 call 方法调用异步请求函数 fetch ，并在请求成功后使用 put 方法发出成功的 Action，如果请求失败则发出失败的 Action。最后我们通过定义一个 watcher 函数 watchFetchUser ，监听 FETCH_USER Action，每次都会触发 fetchUser 函数。

问题二：如何处理并发请求？

在实际应用中，我们可能需要同时发出多个异步请求，由于 Redux-Saga 和 Generator 的特性，我们可以非常方便地处理这种情况。下面是一个例子：

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

function* fetchPersons() {
  try {
    const { persons, cancelFetch } = yield race({
      persons: call(fetch, '/api/persons'),
      cancelFetch: take('CANCEL_FETCH'),
    });
    if (persons) {
      yield put({ type: 'PERSONS_FETCH_SUCCEEDED', persons });
    } else {
      yield put({ type: 'PERSONS_FETCH_CANCELLED' });
    }
  } catch (e) {
    console.log('Error', e);
    yield put({ type: 'PERSONS_FETCH_FAILED', message: e.message });
  }
}

function* fetchSports() {
  try {
    const { sports, cancelFetch } = yield race({
      sports: call(fetch, '/api/sports'),
      cancelFetch: take('CANCEL_FETCH'),
    });
    if (sports) {
      yield put({ type: 'SPORTS_FETCH_SUCCEEDED', sports });
    } else {
      yield put({ type: 'SPORTS_FETCH_CANCELLED' });
    }
  } catch (e) {
    console.log('Error', e);
    yield put({ type: 'SPORTS_FETCH_FAILED', message: e.message });
  }
}

function* watchFetchData() {
  yield all([
    takeEvery('FETCH_PERSONS', fetchPersons),
    takeEvery('FETCH_SPORTS', fetchSports),
  ]);
}

在上面的例子中，我们定义了两个 worker 函数 fetchPersons 和 fetchSports ，这两个函数都通过 race 方法处理了异步请求，只有其中一个请求成功，另一个请求就被取消。在 watchFetchData 函数中，我们通过 all 方法同时监听 FETCH_PERSONS 和 FETCH_SPORTS Action。

问题三：如何进行测试？

测试是任何应用开发的重要组成部分，Redux-Saga 也提供了方便的测试工具。下面是一个例子：

import { call, put } from 'redux-saga/effects';
import { incrementAsync } from './sagas';

test('incrementAsync Saga test', () => {
  const gen = incrementAsync();
  expect(gen.next().value).toEqual(call(delay, 1000));
  expect(gen.next().value).toEqual(put({ type: 'INCREMENT' }));
  expect(gen.next()).toEqual({ done: true, value: undefined });
});

在上面的例子中，我们测试了 incrementAsync 函数，首先我们通过 call 方法调用了 delay 函数，并断言返回值。然后我们使用 put 方法发出了一个 INCREMENT Action，并断言返回值。最后我们通过 next 方法结束了 Generator。这个测试实际上模拟了一个异步操作的过程。

总结

在本文中，我们介绍了 Redux-Saga 的三个经典问题以及解决方案。Redux-Saga 提供了非常方便的工具来处理异步请求和副作用，同时也提供了方便的测试工具。希望本文能够对你在使用 Redux-Saga 时有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65928d68eb4cecbf2d750f67