npm 包 redux-promises 使用教程

阅读时长 6 分钟读完

Redux 是一个非常流行的 JavaScript 应用程序状态管理工具,而 redux-promises 是一个与 Redux 无缝集成的 npm 包,用于处理异步操作。

在本文中,我们将介绍使用 redux-promises 的基本概念和用法,以及一些示例代码。

安装

我们可以使用 npm 来安装 redux-promises:

使用

为了在 Redux 中使用 redux-promises,我们需要应用 redux-promises 中的中间件。在使用 createStore 创建 Redux store 时,我们可以将 redux-promises 中间件作为 applyMiddleware 的参数传入:

基本概念

为了更好地理解 redux-promises,我们需要先了解一些基本概念。

Promise

在 JavaScript 中,Promise 对象表示异步操作的最终完成或失败,并可以将其结果传递回调函数中。redux-promises 很大程度上是基于 Promise 进行操作的。

Action Creator

在 Redux 中,Action Creator 是用于创建 action 对象的方法。在 redux-promises 中,Action Creator 可能会返回 Promise 对象。

Action

在 Redux 中,Action 是一个纯对象,它描述了当前应用程序状态的变化。一个 action 对象至少包含一个 type 属性和一个可选的 payload 属性。

Reducer

在 Redux 中,Reducer 是一个纯函数,它负责接收当前状态和一个 action 对象,并返回一个新的状态。在 redux-promises 中,Reducer 可以处理 Promise 的状态。

示例代码

我们将创建一个简单的 Redux 应用程序,来演示如何在 Redux 中使用 redux-promises。我们将创建一个计数器应用程序,使用两个按钮分别增加和减少计数器的值。

1. 创建 Action Creator

首先我们需要创建一个 Action Creator,它将返回一个增加计数器值的 action 对象:

2. 创建 Reducer

接下来我们需要创建一个 Reducer,它将处理我们的 action:

3. 应用 redux-promises 中间件

我们需要把 redux-promises 中间件应用到我们的 Redux store 中:

4. 创建 Action Creator(使用 Promise)

现在我们需要创建一个 Action Creator,它将返回一个 Promise 对象,并在 Promise 完成时增加计数器值:

这里我们使用延迟 Promise 对象的方式,模拟一个异步操作。

5. 创建更新视图的 React 组件

最后,我们需要创建一个 React 组件,它用于更新计数器并针对两个按钮运行 Action Creator:

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------------- ------------------- - ---- ------------

----- ------- ------- --------- -
  -------- -
    ----- - ------ --------------- ------------------- - - -----------
    ------ -
      -----
        ----------------
        ------- -------------------------------------------
        ------- -----------------------------------------------------
      ------
    --
  -
-

----- --------------- - ----- -- --
  ------ -----
---

----- ------------------ - -
  ---------------
  -------------------
--

------ ------- ------------------------ -----------------------------

我们使用 connect 方法来连接 Redux store 和 React 组件,并使用 mapDispatchToProps 将我们的 Action Creator 映射到组件的 props 上。

现在我们就可以运行我们的应用程序,并使用两个按钮增加计数器值了!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d48

纠错
反馈