Redux 应用中如何处理异步操作-JavaScript中文网-JavaScript教程资源分享门户

异步操作在 Redux 应用中的意义

在 Redux 应用中，我们通常的做法是将所有状态集中管理，这样可以方便地对应用状态进行操作和维护。然而，在实际项目中，我们经常需要在应用中进行异步操作，如网络请求、定时器等。这时，如果用同步操作来处理，会给用户体验带来不好的影响，并且会使应用出现假死的情况。因此，如何正确处理异步操作成为了 Redux 应用的一个重要问题。

Redux 异步处理的方法

方案一：使用 Redux 中间件 (Middleware)

在 Redux 中，我们可以通过使用 Redux 中间件 (Middleware) 来实现异步操作的处理。redux-thunk、redux-saga、redux-observable 和 redux-promise 等都是常见的 Middleware。

其中，redux-thunk 是最常用的 Middleware 之一。它允许我们 dispatch 一个返回函数（thunk action creator）而不是一个普通的 action。这个函数可以被用来在异步操作完成后再 dispatch 一个新的 action，从而更新状态。

使用 redux-thunk 最基本的例子：

// javascriptcn.com 代码示例
// 编写 actionCreator 时返回一个函数即可。
const fetchMyData = () => {
    return (dispatch) => {
        // 异步操作，例如请求远程数据
        fetch('/api/getData')
        .then(res => res.json())
        .then(data => {
            // dispatch action 更新状态
            dispatch(updateMyData(data))
        })
    }
}

dispatch 在这里不再是简单地传递一个 action 对象，在函数内部进行一些异步操作后，可以通过 dispatch 传递新的 action，从而达到修改状态的目的。

方案二：使用 Redux 工具库

另外一种方法是使用一些第三方工具库。例如 Redux-Thunk、Redux-Observable 等，这些库封装了 Redux 的异步操作，使代码更易读、更简洁，大大简化了异步操作的代码量。

举个栗子，使用 Redux-Thunk 实现异步操作：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

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

通过 applyMiddleware 方法将 thunk 中间件加入到 Redux store，之后我们就可以在 actionCreator 中可以使用异步操作。

// javascriptcn.com 代码示例
export const updateMyData = (data) => {
    // 这里返回的对象会被 thunk 处理
    return async (dispatch) => {
        try {
            const res = await fetch('/api/putData', {
                method: 'POST',
                body: JSON.stringify(data)
            });
          
            const newData = await res.json();
            dispatch({ type: 'UPDATE_MY_DATA', payload: newData });
        } catch (err) {
            console.error(err);
        }
    };
};

方案三：使用 Redux-Saga

除了 Redux-Thunk，还有一个比较强大的异步处理中间件 Redux-Saga。Redux-Saga 基于 ES6 的 Generator 和 Yield 实现了一个非常强大的异步操作处理机制，对复杂的业务场景有很好的应对能力；同时也提供了以易于理解的方式管理副作用的能力，比如取消网络请求等。

一个最基本的 Redux-Saga 实现例子：

// javascriptcn.com 代码示例
import { call, put, takeEvery } from 'redux-saga/effects';
import fetchAPI from '../../untils/fetchAPI';

function* fetchMyData(action) {
  try {
    // call 函数可以用来调用异步操作
    const data = yield call(fetchAPI, '/api/getData');
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    console.error(error.message);
  }
}

export default function* watchMyDataAction() {
  yield takeEvery('FETCH_MY_DATA', fetchMyData);
}

通过 yield call 方法调用异步操作（如 fetch），通过 put 方法更新 state，最终通过 takeEvery 函数监听 Dispatch 的 actions，从而启动对应的 Saga。

总结

处理 Redux 中的异步操作可以用官方的 Middleware 示例，也可以使用第三方工具库如 Redux-Thunk、Redux-Observable 或者 Redux-Saga。每个方案都有其优缺点，根据情况选择最适合自己的方案非常重要。在实际项目开发中，需要根据业务需求和开发经验选择最合适的方案。

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