Redux 中异步请求操作的正确姿势-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步请求操作是不可避免的一个环节，而 Redux 作为一个流行的状态管理工具，也支持异步操作。但是，Redux 中的异步操作需要谨慎处理，否则可能会带来一系列的问题。本文将介绍 Redux 中异步请求操作的正确姿势，从下面几个方面进行讲解：

Redux 中异步操作的基本原理
常见的异步请求操作场景
Redux-thunk 的使用方法
Redux-saga 的使用方法
示例代码

1. Redux 中异步操作的基本原理

Redux 的核心思想是将应用程序的状态放置在一个中央仓库中，并由纯函数来处理所有的状态更新。而异步操作则可能导致无法保证状态的一致性。Redux 允许通过 middleware 来处理异步操作，常用的 middleware 包括 Redux-thunk 和 Redux-saga。

在 Redux 中，异步操作通常分为两类：请求和响应。请求由用户或系统在 UI 层触发，而响应则是从服务器或其他数据源返回的数据。如果在 ActionCreator 中执行异步操作，将导致 ActionCreator 返回一个尚未完成的 Promise。因此，需要使用 middleware 将异步操作转移到 ActionCreator 之外。

2. 常见的异步请求操作场景

在 Redux 中，常见的异步请求场景包括以下几种：

发送数据到服务器并更新状态。
向服务器获取数据并更新状态。
上传文件到服务器。
下载文件或图片。

针对这些场景，Redux 提供了多种 middleware 来实现异步操作。接下来，我们将介绍 Redux-thunk 和 Redux-saga 的使用方法。

3. Redux-thunk 的使用方法

Redux-thunk 是一个常用的 middleware，可以使 ActionCreator 返回一个函数而不是一个对象。这个函数将接收 dispatch 和 getState 两个参数，可以在其中执行异步操作并根据返回值更新状态。下面是一个示例代码：

// www.javascriptcn.com code example
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const initialState = {
  loading: false,
  error: null,
  data: null
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return {
        ...state,
        loading: true
      };
    case 'FETCH_DATA_SUCCESS':
      return {
        ...state,
        loading: false,
        data: action.payload
      };
    case 'FETCH_DATA_FAILURE':
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

const fetchDataRequest = () => ({
  type: 'FETCH_DATA_REQUEST'
});

const fetchDataSuccess = (data) => ({
  type: 'FETCH_DATA_SUCCESS',
  payload: data
});

const fetchDataFailure = (error) => ({
  type: 'FETCH_DATA_FAILURE',
  payload: error
});

const fetchData = () => {
  return (dispatch, getState) => {
    dispatch(fetchDataRequest());
    return fetch('/api/data')
      .then(response => response.json())
      .then(data => dispatch(fetchDataSuccess(data)))
      .catch(error => dispatch(fetchDataFailure(error)));
  };
};

const store = createStore(reducer, applyMiddleware(thunk));
store.dispatch(fetchData());

在上面的代码中，我们定义了三个 ActionCreator 分别用来请求数据、请求成功和请求失败。fetchData 方法会返回一个函数，在其中执行异步操作。当数据请求成功时，将调用 fetchDataSuccess 方法，将数据保存到 store 中。如果请求失败，则使用 fetchDataFailure 方法更新 store。在最后，我们通过 createStore 函数创建了一个 store 并使用 applyMiddleware 函数将 thunk middleware 注入到 store 中，然后调用 store.dispatch 方法执行 fetchData 方法。

4. Redux-saga 的使用方法

Redux-saga 是另一个常用的 middleware，它使用 ES6 的 Generator 函数来处理异步操作。Generator 函数可以中止执行，等待异步操作完成后再继续执行。这使得 Redux-saga 可以比 Redux-thunk 更加精确地控制异步操作的执行。下面是一个示例代码：

// www.javascriptcn.com code example
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { call, put, takeEvery } from 'redux-saga/effects';

const sagaMiddleware = createSagaMiddleware();

const initialState = {
  loading: false,
  error: null,
  data: null
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return {
        ...state,
        loading: true
      };
    case 'FETCH_DATA_SUCCESS':
      return {
        ...state,
        loading: false,
        data: action.payload
      };
    case 'FETCH_DATA_FAILURE':
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

const fetchData = () => ({
  type: 'FETCH_DATA_REQUEST'
});

function* fetchDataWorker() {
  try {
    const response = yield call(fetch, '/api/data');
    const data = yield call([response, 'json']);
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_DATA_FAILURE', payload: error });
  }
}

function* fetchDataWatcher() {
  yield takeEvery('FETCH_DATA_REQUEST', fetchDataWorker);
}

const store = createStore(reducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(fetchDataWatcher);
store.dispatch(fetchData());

在上面的代码中，我们定义了两个 Saga 函数：fetchDataWorker 和 fetchDataWatcher。fetchDataWorker 是真正执行异步请求操作的函数，通过 call 指令调用 fetch 函数，然后解析返回的数据并通过 put 指令将数据保存到 store 中。fetchDataWatcher 函数监听 'FETCH_DATA_REQUEST' 动作，当动作被触发时，执行 fetchDataWorker 函数。

5. 示例代码

完整的示例代码可以从以下链接下载：

https://github.com/username/repo

本文介绍了 Redux 中异步请求操作的正确姿势，分别介绍了 Redux-thunk 和 Redux-saga 的使用方法，并提供了示例代码。在具体开发中，请根据实际需求选择合适的 middleware，例如，如果需要更加精确的控制异步操作的执行，可以选择 Redux-saga。而如果只是需要简单地处理异步请求，可以选择 Redux-thunk。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d01931e46428fe9ecb0df7

Redux 中异步请求操作的正确姿势

1. Redux 中异步操作的基本原理

2. 常见的异步请求操作场景

3. Redux-thunk 的使用方法

4. Redux-saga 的使用方法

5. 示例代码

接着读