Redux 是一个非常流行的 JavaScript 应用程序状态管理工具,而 redux-promises 是一个与 Redux 无缝集成的 npm 包,用于处理异步操作。
在本文中,我们将介绍使用 redux-promises 的基本概念和用法,以及一些示例代码。
安装
我们可以使用 npm 来安装 redux-promises:
npm install --save redux-promises
使用
为了在 Redux 中使用 redux-promises,我们需要应用 redux-promises 中的中间件。在使用 createStore 创建 Redux store 时,我们可以将 redux-promises 中间件作为 applyMiddleware 的参数传入:
import { createStore, applyMiddleware } from "redux"; import promisesMiddleware from "redux-promises"; import reducer from "./reducer"; const store = createStore(reducer, applyMiddleware(promisesMiddleware));
基本概念
为了更好地理解 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 对象:
export const incrementCount = () => ({ type: "INCREMENT_COUNT", payload: 1 });
2. 创建 Reducer
接下来我们需要创建一个 Reducer,它将处理我们的 action:
export const countReducer = (state = 0, action) => { switch (action.type) { case "INCREMENT_COUNT": return state + action.payload; default: return state; } };
3. 应用 redux-promises 中间件
我们需要把 redux-promises 中间件应用到我们的 Redux store 中:
import { createStore, applyMiddleware } from "redux"; import promisesMiddleware from "redux-promises"; import { countReducer } from "./reducers"; const store = createStore(countReducer, applyMiddleware(promisesMiddleware));
4. 创建 Action Creator(使用 Promise)
现在我们需要创建一个 Action Creator,它将返回一个 Promise 对象,并在 Promise 完成时增加计数器值:
export const incrementCountAsync = () => ({ type: "INCREMENT_COUNT", payload: new Promise(resolve => setTimeout(() => resolve(1), 1000)) });
这里我们使用延迟 Promise 对象的方式,模拟一个异步操作。
5. 创建更新视图的 React 组件
最后,我们需要创建一个 React 组件,它用于更新计数器并针对两个按钮运行 Action Creator:
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - ------- - ---- -------------- ------ - --------------- ------------------- - ---- ------------ ----- ------- ------- --------- - -------- - ----- - ------ --------------- ------------------- - - ----------- ------ - ----- ---------------- ------- ------------------------------------------- ------- ----------------------------------------------------- ------ -- - - ----- --------------- - ----- -- -- ------ ----- --- ----- ------------------ - - --------------- ------------------- -- ------ ------- ------------------------ -----------------------------
我们使用 connect 方法来连接 Redux store 和 React 组件,并使用 mapDispatchToProps 将我们的 Action Creator 映射到组件的 props 上。
现在我们就可以运行我们的应用程序,并使用两个按钮增加计数器值了!
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d48