如何使用 redux-saga 处理异步 API 调用？

Question

最近，我们开始使用 redux-saga 中间件来管理来自 store 的异步 API 调用。

以前，我们使用基于承诺的通用操作，一旦我们可以在操作本身上使用 async/await 和 .then() 和 .catch()，就可以轻松管理组件流。

承诺：

const fetchCars = async () => {
  const {data} = await fetchCarsRequest();
  
  setCars(data);
}

cars.map((car) => <li>{car.name}</li>);

与传奇：

function* fetchCarsSaga() {
  try {
    const {data} = yield call(fetchCarsService);

    yield put(fetchCarsSuccess);
  } catch(error) {
    yield put(fetchCarsFailure);
  } 
}

const fetchCars = async () => {
 fetchCarsRequest(); //action that calls the above saga

 setCars(cars); //state from store 
}

cars.map((car) => <li>{car.name}</li>);

在第二个例子中，即使我们使用生成器来处理异步API调用，也不可能使用await语句，所以它在调用fetchCarsRequest之后立即调用setCars函数，尝试将尚不存在的东西设置为组件状态。

所以我的问题是：有没有办法将 await 语句替换为某些东西并等待请求函数（不是异步函数）完成 API 调用？

Answer 1

使用 redux-saga，流程会有些不同。您不直接在组件中使用生成器。您需要从 saga 更新 redux 状态并在组件中获取它。

react component -> redux action -> saga -> redux state -> react component

您可以看看 PT-BR 中的两篇文章：

• https://medium.com/nossa-coletividad/redux-saga-voc%C3%AA-no-controle-das-opera%C3%A7%C3%B5es-ass%C3%ADncronas-71c9e6b3aabc
• https://oieduardorabelo.medium.com/redux-saga-gerenciando-efeitos-f518a31c744e

一个好的create-react-app模板是：

• https://github.com/mmajdanski/cra-redux-saga-template

在 CodeSandbox 中：

• https://codesandbox.io/s/6mgb2

Answer 2

杀死组件状态

您想要调度一个动作fetchCarsRequest()，它会触发一个 API 调用并将结果保存到您的 redux 存储中。你想等待这个完成，然后调用setCars(cars) 将你的组件状态设置为来自 redux 状态的值。为什么？

这是一种反模式。数据已经存在于 redux 中，应该直接从组件中的 redux 访问。您应该使用useSelector 或connect HOC 从redux 中选择cars 的值。一旦您的 fetch 发送 fetchCarsSuccess 并更新了存储状态，它将自动使用新数据重新渲染您的组件。

它应该看起来像这样。

传奇

function* fetchCarsSaga() {
  try {
    const {data} = yield call(fetchCarsService);

    // this action should store the data to the store
    // it needs the data as an argument!
    yield put(fetchCarsSuccess(data));
  } catch(error) {
    yield put(fetchCarsFailure(error));
  } 
}

组件

const Cars = () => {
   const dispatch = useDispatch();
   const cars = useSelector( state => state.cars.data ) || [];
   const isLoading = useSelector( state => state.cars.isLoading );
   const error = useSelector( state => state.cars.error );

   useEffect( () => {
      dispatch(fetchCarsRequest()); // action that calls the saga
   }, [] );


   return (
      {!! error && (<div>Error: {error}</div>)}
      {isLoading ? <Spinner/> : (
        <ul>
          {cars.map((car) => <li key={car.id}>{car.name}</li>)}
        </ul>
      )}
   )
}