Redux 异步解决方案2. Redux-Saga中间件

Redux-Saga是一个用于管理应用程序异步操作的中间件，它通过创建Sagas来监视在Redux store中 dispatch 的actions，并且根据这些actions来启动异步任务（如调用API）。

以下是一个简单的Redux-Saga用法示例：

// 引入创建store所需的中间件
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
 
// 引入reducer和saga
import reducer from './reducers';
import mySaga from './sagas';
 
// 创建saga中间件
const sagaMiddleware = createSagaMiddleware();
 
// 将saga中间件加入到applyMiddleware中，创建store
const store = createStore(reducer, applyMiddleware(sagaMiddleware));
 
// 运行saga
sagaMiddleware.run(mySaga);

在sagas.js中，你可能有以下内容：

import { takeEvery, put } from 'redux-saga/effects';
import { GET_DATA } from '../actions/types';
import { dataLoaded, dataLoadingError } from '../actions';
import Api from '../api';
 
// 监视GET_DATA action
function* mySaga() {
  yield takeEvery(GET_DATA, getData);
}
 
// 处理异步操作
function* getData(action) {
  try {
    const data = yield Api.fetchData(action.payload); // 假设Api.fetchData是异步的API调用
    yield put(dataLoaded(data)); // 调用dataLoaded action
  } catch (error) {
    yield put(dataLoadingError(error)); // 调用dataLoadingError action
  }
}

在这个例子中，当你的Redux store接收到类型为GET_DATA的action时，getData saga会被触发并执行异步操作。成功获取数据后，它会dispatch一个dataLoaded action；如果出现错误，它会dispatch一个dataLoadingError action。