Redux Promise Middleware 插件的使用技巧-JavaScript中文网-JavaScript教程资源分享门户

Redux是一个相对较新的前端框架，它使用单一的全局store管理整个应用的状态。Redux的一个最大优势是其强大的可扩展性，它允许开发人员使用中间件增强功能。Redux Promise Middleware就是其中一款重要的中间件，它可以帮助我们优化Redux中的异步操作。

什么是Redux Promise Middleware

Redux Promise Middleware是Redux库的一个中间件，它允许我们在Redux中更方便的处理异步操作。Async函数自身就是Promise，并且它还可以使用async&await语法进行更方便的异步编程。

如何使用Redux Promise Middleware

在使用Redux Promise Middleware之前，需要先用npm安装依赖包：

npm install redux-promise-middleware

然后在Redux Store的creation过程中引入middleware：

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

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

接下来，我们就可以在Redux中使用Promise Action Creator，例如：

dispatch({
  type: 'FETCH',
  payload: axios.get('/api/data'),
});

在这种情况下，Redux Promise Middleware自动地帮我们处理了两种类型的action：

Pending Action：表示正在等待结果，并且初始状态的type加了_PENDING后缀。
Fulfilled/Rejected Action：表示Promise被解决，即成功或失败，并且其type加了_FULFILLEDor_REJECTED后缀。

在上面的例子中，当我们使用Axios来获取数据并将结果放入中间件时，middleware自动地处理了这些Action。例如，在我们的Action Creator中，如果Promise被解决，则middleware会将数据（或错误）放入payload，对应的Action的type将会增加_FULFILLED或_REJECTED后缀。

Redux Promise Middleware的优点

代码更简洁：使用Redux Promise Middleware，你可以将异步调用放入Action Creator中而无需担心过多的回调，这使得代码更加简洁。
更可读性：通过使用Redux Promise Middleware，我们可以很容易的创建异步代理来执行一些异步操作，这在某些情况下可以提供更好的可读性。
更好的反应性：当处理异步操作时，Redux Promise Middleware会在异步请求返回Promise时自动判断其余异步请求是否已经执行完毕，从而提升应用的反应性。

示例代码

下面是Redux Promise Middleware的JavaScript示例代码：

// javascriptcn.com 代码示例
import axios from 'axios';
import { createAction } from 'redux-actions';
import { pending, fulfilled, rejected } from './generalActions';

const FETCH = 'FETCH';

const fetchAction = createAction(FETCH, async () => {
  // 显示“请求中...”
  dispatch(pending(FETCH));
  // 真实异步请求（axios实例）
  const response = await axios.get('/api/data');
  // 返回Promise结果
  return response.data.result;
});

// 一次性定义所有的前缀字符串
const prefixes = [FETCH];

export const actionCreators = {
  ...createActionCreators([fulfilled, rejected], prefixes),
  fetchAction,
};

总结

Redux Promise Middleware是一个强大的Redux中间件，它允许我们使用async/await更轻松地处理异步操作。使用该插件可以让你的代码更具可读性、反应性更加灵活，并提供更好的错误处理能力。

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