Redux 请求中间件如何处理并发 ？

Redux 本身是一个状态管理库，并不直接处理并发请求。但当我们谈论 Redux 与异步操作（如 API 请求）结合时，通常会使用 Redux middleware，如 redux-thunk 或 redux-saga。这些中间件允许你在 action 创建函数中执行异步操作，并在完成后分发另一个 action。

当处理并发请求时，主要的问题是确保你的应用能够正确处理多个请求的结果，并且按照预期更新状态。以下是如何使用 redux-saga 处理并发请求的一个基本示例：

1. 安装 redux-saga:

npm install redux-saga

2. 设置 saga middleware:

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

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(SagaMiddleware)
);

SagaMiddleware.run(rootSaga);

export default store;

3. 创建一个 Saga 处理并发请求:

假设我们有两个 API 请求，我们想并发地发送它们，并在两者都完成后更新状态。

import { call, all, put } from 'redux-saga/effects';
import { fetchData1, fetchData2 } from './api';
import { data1Loaded, data2Loaded, bothDataLoaded } from './actions';

function* fetchData1Saga() {
  const response = yield call(fetchData1);
  yield put(data1Loaded(response.data));
}

function* fetchData2Saga() {
  const response = yield call(fetchData2);
  yield put(data2Loaded(response.data));
}

function* bothDataSaga() {
  yield all([
    call(fetchData1Saga),
    call(fetchData2Saga)
  ]);
  yield put(bothDataLoaded());
}

export default [
  bothDataSaga
];

在上述代码中，bothDataSaga 是一个 Saga，它并发地调用 fetchData1Saga 和 fetchData2Saga。当这两个 Saga 都完成时，它会分发一个 bothDataLoaded action。

4. 在你的 reducer 中处理这些 action:

const initialState = {
  data1: null,
  data2: null,
  bothDataLoaded: false
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'DATA1_LOADED':
      return { ...state, data1: action.payload };
    case 'DATA2_LOADED':
      return { ...state, data2: action.payload };
    case 'BOTH_DATA_LOADED':
      return { ...state, bothDataLoaded: true };
    default:
      return state;
  }
}

export default rootReducer;

5. 在你的组件中触发 bothDataSaga:

import { useDispatch } from 'react-redux';
import { bothDataLoaded } from './actions';

function MyComponent() {
  const dispatch = useDispatch();

  const fetchData = () => {
    dispatch(bothDataLoaded());
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Both Data</button>
    </div>
  );
}

export default MyComponent;

这只是一个简单的示例，展示了如何使用 redux-saga 处理并发请求。在实际应用中，你可能需要处理更多的边缘情况和错误处理。但希望这个示例能为你提供一个开始的方向！