在 Web 前端开发中，Redux 已经成为了一个很受欢迎的状态管理库，它提供了一种可预测的方式来管理应用程序的状态，并且非常适合于大型应用程序的开发。尽管 Redux 本身的设计十分出色，但在实际开发中，我们仍可能遇到一些问题，如异步操作的处理等。幸运的是，有一些优秀的 Redux 中间件可供使用，帮助我们解决诸如异步操作等问题。其中，@kovensky/redux-promise 就是一种非常好用的 Redux 异步中间件。本文就是介绍如何使用它。
安装
要使用 @kovensky/redux-promise，首先需要通过 npm 安装：
npm install @kovensky/redux-promise --save
使用
使用 @kovensky/redux-promise 非常简单。只需在 Redux 的 applyMiddleware 函数中使用即可：
import { createStore, applyMiddleware } from 'redux'; import ReduxPromise from '@kovensky/redux-promise'; import rootReducer from './reducers'; const store = createStore( rootReducer, applyMiddleware(ReduxPromise) );
示例
我们来看一下使用 @kovensky/redux-promise 处理异步操作的示例代码，如下：
-- -------------------- ---- ------- -- ---------- ------ ----- ---- -------- ------ ----- ----------- - -------------- ------ -------- ------------ - ----- ------- - ------------------------ ------ - ----- ------------ -------- ------- -- - -- ----------- ------ - ----------- - ---- ------------ ------ ------- -------------- - --- ------- - ------ ------------- - ---- ------------ ------ -------------------- -------- ------ ------ - - -- ------------ ------ ------ - --------- - ---- -------- ------ - ------------ ----------- - ---- -------------- ------ - ---------- - ---- ------------ -------- ----------- - ----- -------- - -------------- ----- ----- - ----------------- -- ------------- ------------ -- - ----------------------- -- ------------ ------ - ---- --------------- -- --- --------------------------------- ----- -- - ------ ------- ----------展开代码
在这个示例中，我们通过 axios 库发出一个 HTTP 请求并将数据作为 payload 属性传递给 action 对象。然后我们在 reducers.js 文件中处理该 action，将数据存储到 Redux store 中，最后在 component.js 组件中通过 React Hooks 使用该数据。
值得注意的是，在这个示例中并没有使用 @kovensky/redux-promise 明确地处理异步操作。这是因为 axios 库本身就返回了一个 Promise 对象，因此 @kovensky/redux-promise 会自动识别这个 Promise 并在必要时调用它。这大大简化了代码，并且让异步操作变得非常容易。
如果你遇到了需要显式处理异步操作的情况，可以直接在 action 中返回一个普通对象，然后在 Reducers 中处理异步操作，如下：
-- -------------------- ---- ------- -- ---------- ------ ----- ----------- - -------------- ------ -------- ------------ - ------ -------- -- - ---------- ----- ------------ -- --- ---- ----- --------- ---- --- --- -- - -- ----------- ------ - ----------- - ---- ------------ ------ ------- -------------- - --- ------- - ------ ------------- - ---- ------------ ------ --------------- -------- ------ ------ - -展开代码
你可能会奇怪，这不是异步操作吗？不需要在 action 中使用 Promise 之类的吗？实际上，这样是可行的，因为 Redux-thunk 允许 action 返回一个函数，该函数将 dispatch 和 getState 作为参数执行，并且可以在函数中进行任何异步操作。这样就有了一个是逻辑上相对简单且能满足日常开发需求的异步操作解决方案。
总结
@kovensky/redux-promise 提供了一种处理异步操作的简洁方法，不仅可以减少代码负担，而且 makes it easy to reason about your code.通过显式地处理异步操作，使开发人员更容易理解代码的工作方式，以及从 Redux store 中获得的数据。即使你敢于挑战更复杂的异步操作，也可以使用此库作为实际项目中处理异步操作的正确做法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc6967216659e244433
