Redux 本身是一个同步状态管理库，它专注于以可预测的方式管理和更新应用程序的状态。Redux 的核心概念是纯函数的 reducer 和同步的 action。当应用程序需要处理异步操作，如数据的 API 请求时，Redux 单独并不能有效地处理。
异步中间件，如 Redux Thunk 或 Redux Saga，使得在 Redux 应用程序中处理异步逻辑成为可能。下面是一些为什么需要异步中间件的原因：
1. 处理异步操作
Redux 的基本原则是 action 应该是一个具有 type 属性的对象，而且 reducer 应该是同步的纯函数。这种模式并不适用于执行异步操作，例如 API 调用。异步中间件允许我们在 dispatching action 之前执行异步代码，然后根据异步操作的结果来 dispatch 实际的 action。
例子： 假设我们有一个获取用户信息的异步操作。使用 Redux Thunk，我们可以创建一个 thunk action creator，它返回一个函数而非 action 对象。这个函数能够执行异步请求并且在请求完成后 dispatch 一个 action。
const fetchUserData = (userId) => { return (dispatch) => { dispatch({ type: 'FETCH_USER_REQUEST' }); fetch(`/api/user/${userId}`) .then((response) => response.json()) .then((user) => dispatch({ type: 'FETCH_USER_SUCCESS', payload: user })) .catch((error) => dispatch({ type: 'FETCH_USER_FAILURE', error })); }; };
2. 便于管理复杂的异步逻辑
在大型应用程序中，异步逻辑可能变得非常复杂，包括并发请求、条件请求、请求之间的竞争、错误处理等。异步中间件可以帮助管理这些复杂性，提供更清晰和更可维护的代码结构。
例子： 在使用 Redux Saga 的情况下，我们可以使用 ES6 的 generator 函数来更加直观和声明式地处理复杂的异步流。
function* fetchUserDataSaga(action) { try { yield put({ type: 'FETCH_USER_REQUEST' }); const user = yield call(fetchApi, `/api/user/${action.userId}`); yield put({ type: 'FETCH_USER_SUCCESS', payload: user }); } catch (error) { yield put({ type: 'FETCH_USER_FAILURE', error }); } }
3. 更好的测试性
异步中间件使得异步逻辑更加独立于组件，这有助于进行单元测试。我们可以在不进行实际的 API 调用的情况下，测试 action creators 和 reducers 的逻辑。
例子： 使用 Redux Thunk，我们可以测试 thunk action creator 是否正确地 dispatch 了相应的 actions。
// 使用 Jest 测试框架 it('creates FETCH_USER_SUCCESS when fetching user has been done', () => { // 模拟 dispatch 和 getState 函数 const dispatch = jest.fn(); const getState = jest.fn(); // 模拟 fetch API global.fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve({ id: 1, name: 'John Doe' }), }) ); // 执行 thunk action creator return fetchUserData(1)(dispatch, getState).then(() => { // 检查是否 dispatch 了正确的 action expect(dispatch).toHaveBeenCalledWith({ type: 'FETCH_USER_SUCCESS', payload: { id: 1, name: 'John Doe' } }); }); });
总结
Redux 需要异步中间件来处理异步操作，帮助维护复杂的异步逻辑，并提高代码的可测试性。这些中间件扩展了 Redux，使其能够以一种既有序又高效的方式处理异步数据流。Redux 作为一个状态管理库，其核心设计是围绕着同步的状态更新。也就是说，在没有任何中间件的情况下，当一个 action 被派发（dispatched）时，它会立即通过同步的 reducers 更新状态。然而，在实际的应用中，我们经常需要处理异步操作，比如从服务器获取数据，这些操作并不能立刻完成并返回数据。
因此，为了在 Redux 架构中处理这些异步操作，我们需要一种方式来扩展 Redux 的功能，使其能够处理异步逻辑。这就是异步中间件的用武之地。以下是几个为什么 Redux 需要异步数据流中间件的理由：
-
维护纯净的 reducer 函数： Reducer 函数应该是纯函数，这意味着给定相同的输入，总是返回相同的输出，并且不产生任何副作用。异步操作（如 API 调用）会产生副作用，因此不能直接在 reducer 中处理。
-
扩展 Redux 的功能： 异步中间件像是 Redux 生态系统中的插件，它允许开发者在不修改原始 Redux 库代码的情况下增加新的功能。例如，可以增加日志记录、错误报告或异步处理等功能。
-
异步控制流： 异步中间件允许开发者在派发 action 和到达 reducer 之间插入一个异步操作。这意味着可以先发出一个表示“开始异步操作”的 action，然后在操作完成时发出另一个表示“异步操作完成”的 action。
-
更干净的代码结构： 通过将异步逻辑封装在中间件内，我们可以保持组件和 reducer 的简洁。这避免了在组件中混合异步调用和状态管理逻辑，有助于代码分离和维护。
-
测试和调试的便捷性： 中间件提供了一个独立的层，可以在这个层中进行单独的测试和模拟异步行为，而不必担心组件逻辑或者 UI 层的细节。
例子
在实际应用中，最常见的异步中间件是 redux-thunk 和 redux-saga。
- redux-thunk 允许 action 创建函数（action creators）返回一个函数而不是一个 action 对象。这个返回的函数接收
dispatch和getState作为参数，让你可以进行异步操作，并在操作结束后派发一个新的 action。
const fetchUserData = (userId) => { return (dispatch, getState) => { dispatch({ type: 'USER_FETCH_REQUESTED', userId }); return fetchUserFromApi(userId) .then(userData => { dispatch({ type: 'USER_FETCH_SUCCEEDED', userData }); }) .catch(error => { dispatch({ type: 'USER_FETCH_FAILED', error }); }); }; };
- redux-saga 则使用 ES6 的 Generator 函数来使异步流更易于读写。Sagas 可以监听派发到 store 的 actions，并在某个 action 被派发时执行复杂的异步逻辑。
import { call, put, takeEvery } from 'redux-saga/effects'; function* fetchUser(action) { try { const user = yield call(Api.fetchUser, action.payload.userId); yield put({type: 'USER_FETCH_SUCCEEDED', user: user}); } catch (e) { yield put({type: 'USER_FETCH_FAILED', message: e.message}); } } function* mySaga() { yield takeEvery('USER_FETCH_REQUESTED', fetchUser); }
总的来说，异步中间件在处理复杂的异步数据流时，可以提高 Redux 应用的可扩
