与 Redux-Promise 一起使用的导入语句

2020-10-19 08:00:00 · 飞浪

Redux 允许您使用从任何组件访问的存储来创建全局状态，但是为了在操作调度之间记录或触发操作，您需要中间件。

介绍

React 使用 Redux 作为状态管理库，它使用存储创建全局状态对象，任何组件都可以通过订阅组件中的存储值来访问全局状态。Redux 允许您使用可以从应用程序中的任何组件访问的存储来创建全局状态，但如果您想要在操作调度之间记录或触发操作，则需要使用中间件。

您可以使用承诺来评估操作并定义成功或失败。因此，Redux 中的每个操作都应返回响应。您将在本指南中了解有关使用 Redux Promise 的更多信息。

Redux 中的中间件是什么？

Redux 中的中间件会评估操作；换句话说，你可以说中间件只是在对服务器的请求之间触发的一段代码。

您可以使用中间件查看触发的操作、请求负载、来自服务器的响应、响应状态以及其他中间件（例如redux-logger）来记录请求。

在 React App 中使用 Redux-Promise

您可以使用承诺来表示基于请求数据的值，无论是已解析的值还是请求未解析的原因。

JavaScript 使用函数订阅的承诺，并且相同的函数知道如何请求状态并解决或拒绝承诺。

RR redux-promise是一个 npm 包，充当 Redux 的中间件，如果得到解决，则返回对象。但如果被拒绝，则不会返回任何内容。

要使用redux-promise，请使用以下命令安装它。

      npm install redux-promise

安装redux-promise后，下一步是导入该库。

      import promiseMiddleware from "redux-promise";
    

从包中使用导入语法非常简单。只需按其名称导入即可，例如promiseMiddleware或任何其他自定义名称。

将 Redux-Promise 中间件应用于 Store

为了使redux-promise工作，请使用 store 对其进行配置，以便一旦应用程序到达服务器端点，promise 就会开始触发操作。

在应用中间件之前，需要创建Redux存储，如下所示。

      import { createStore, combineReducers, applyMiddleware } from "redux";
// Primary reducer
import { contacts } from "../reducer";
// Importing redux-promise with custom name
import promiseMiddleware from "redux-promise";

export default () => {
  const rootReducer = combineReducers({
    contacts
  });

  // Applied middleware using 'applyMiddleware'
  return createStore(rootReducer, applyMiddleware(promiseMiddleware));
};
    

有两个导入语句：导入 Reducer 和导入Redux-Promise包。您可以使用createStore函数创建存储，该函数接受两个不同的参数：

根部减速器
中间件功能

中间件功能还需要自定义中间件实现中的中间件功能的数量，或者使用包的名称。

在上面的例子中，使用的redux-promise包是一个中间件；因此，它使用applyMiddleware函数应用于 store 。应用redux-promise后，您将收到一个包含两个参数的有效负载：

如果承诺得到解决，则有效负载状态为成功为真。
如果承诺被拒绝，则有效负载状态为成功，否则为假。

您可以按照如下所示配置调度操作。

      store.dispatch({
    type: 'ADD_CONTACT',
    resolvesWith: ['CONTACT_ADDED'],
    rejectsWith: ['CONTACT_FAILED'],
    payload: {
        name: "This is first contact"
    }
})
    

resolvesWith和rejectionsWith定义了当联系人被添加或由于不可避免的结果而失败时采取的操作类型。因此，根据承诺状态分派相应的操作。

结论

Redux 中间件是一种实用程序，用于帮助维护由 React 组件调度触发的请求和响应。它被广泛使用，因为它的配置简单，并且能够解析或拒绝库的请求，例如redux-promise。我希望这个可持续的解决方案能促使您使用 Redux 应用程序配置最佳的 promise 配置。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

与 Redux-Promise 一起使用的导入语句

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { createStore, combineReducers, applyMiddleware } from "redux"; // Primary reducer import { contacts } from "../reducer"; // Importing redux-promise with custom name import promiseMiddleware from "redux-promise"; export default () => { const rootReducer = combineReducers({ contacts }); // Applied middleware using 'applyMiddleware' return createStore(rootReducer, applyMiddleware(promiseMiddleware)); };