npm 包 redux-promise-middleware 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Redux 是一种非常流行的状态管理库。而在 Redux 中，处理异步操作是一个相对麻烦的问题。为了解决这个问题，我们可以使用 redux-promise-middleware 这个 NPM 包。

安装

要安装 redux-promise-middleware，只需要运行以下命令：

npm install redux-promise-middleware

用法

假设你已经创建了一个 Redux store，在该 Store 中有一个 todos 的 reducer，用于管理待办事项的列表。如果你想要通过 API 获取待办事项并将其添加到列表中，你可以按照以下步骤进行配置：

首先，在你的 action creator 中，你可以返回一个 Promise，这个 Promise 将在数据获取完成后被解析为带有数据的 action 对象。例如：

function fetchTodos() {
  return fetch('/todos')
    .then(response => response.json())
    .then(data => ({
      type: 'FETCH_TODOS',
      payload: data,
    }));
}

然后，你需要在创建 Store 时使用 redux-promise-middleware。具体地说，你需要使用 applyMiddleware 函数，并传递 promiseMiddleware 作为参数，如下所示：

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

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

现在，当你调用 fetchTodos action creator 时，该函数将返回一个 Promise，而不是一个普通的 action 对象。当这个 Promise 被解析时，它将包含在 Store 中作为数据的 payload，并且可以被 reducer 处理。

最后，在你的 reducer 中，你可以检查 action 是否带有一个 payload 字段，如果有，则说明该 action 是一个由 redux-promise-middleware 处理过的异步 action。例如：

function todos(state = [], action) {
  switch (action.type) {
    case 'FETCH_TODOS_FULFILLED':
      return state.concat(action.payload);
    default:
      return state;
  }
}

在这个 reducer 中，我们使用了 action.type 来判断是否是我们想要处理的 action。如果是，我们就将 action.payload 添加到当前状态中，以便更新待办事项列表。

总结

通过使用 redux-promise-middleware，我们可以轻松地处理 Redux 应用程序中的异步操作。它使得我们能够更方便地编写 action creators 和 reducers，从而提高了代码的可读性和可维护性。

希望本文对你有所帮助！

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