Redux 数据流程中间件使用指南之 promise

在 Redux 的应用开发中，使用中间件来扩展 Redux 的功能是一种非常常见的做法。而 promise 是一种非常有用的中间件，在异步处理过程中能够提供更好的编写体验。本文将介绍 Redux 中使用 promise 中间件的详细流程以及指导使用方法。

1. promise 中间件的作用

在 Redux 中使用 promise 中间件能够优化异步数据流程的处理方式，提高开发效率。在 Promise Middleware 中，对于 action 所包含的 payload 进行类型判断，如果 payload 是 Promise 类型的话，将其进行等待并返回数据以及状态信息。比如，下面的代码就是使用 promise 执行异步操作的例子：

export const fetchUserData = () => (dispatch) => {
  dispatch({ type: USER_FETCH_START });
  return api.fetchUser().then(
    response => dispatch({ type: USER_FETCH_SUCCESS, payload: response }),
    error => dispatch({ type: USER_FETCH_FAILURE, payload: error })
  );
};

在该例子中，fetchUserData 的返回值是一个函数。当调用这个函数时，就会触发一个 action，其中 type 为 USER_FETCH_START。在接下来的链式调用中，将发起一个异步请求，获取到用户数据后会执行 dispatch({type: USER_FETCH_SUCCESS,payload: response})，将用户数据作为 payload 发送给 reducer 进行处理。

1. 代码实现

为了使用 Promise Middleware，首先要在 Redux 应用中安装 redux-promise-middleware 中间件包。在安装后，需要在 applyMiddleware 上调用该中间件，配置如下：

import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise-middleware';
import rootReducer from './reducers';

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

在使用 createStore 创建 store 时，将 applyMiddleware 作为其第二个参数，并注入 promiseMiddleware。

最后在 action 中，无需手动实现处理异步请求的逻辑，只需要将异步请求的 promise 直接传入数据即可，如下：

export const fetchUserData = () => ({
  type: 'FETCH_USER_DATA',
  payload: api.fetchUser()
});

redux-promise-middleware 会等待 promise 处理完成，然后自动派遣三种不同的 action，并将异步返回数据的状态信息作为额外的参数附加在 action 上：

• suffix === _PENDING
• suffix === _FULFILLED
• suffix === _REJECTED

例如，在 FETCH_USER_DATA 这个 action 的 promise 处理完成之前，middleware 帮我们派发了一个描叙正在处理的 promise action：

{
  type: 'FETCH_USER_DATA_PENDING',
  meta: undefined,
  payload: undefined,
}

当 promise 进入到 fulfilled 状态，middleware 再次派发一个 action：

{
  type: 'FETCH_USER_DATA_FULFILLED',
  meta: undefined,
  payload: { /* api 返回的数据 */},
}

当 promise 进入到 rejected 状态，middleware 会再次派发一个 action：

{
  type: 'FETCH_USER_DATA_REJECTED',
  meta: undefined,
  payload: Error
}

在 reducer 中，我们可以根据不同的状态信息来处理返回的数据。

1. 结尾

在 Redux 应用开发中，使用 promise 中间件可以极大地提高开发效率。它会自动派发三种类型的 action，你只需要在 reducer 中处理相应的状态就可以了。对于 Redux 状态管理的深入理解，可以访问 Redux 官网 获取更多的学习资源，加速成为一个能力出众的前端开发者。

以上就是 Redux 数据流程中间件使用指南之 promise 的文章内容，希望对读者有所帮助。

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