在现代 Web 开发中, JavaScript 技术 stack 中的前端库与框架不断涌现, 使我们的开发变得更加高效且有趣。其中, Redux 框架不仅给前端架构设计带来了革命性的变化, 也让开发者对设计更加敏感。Nitro-Redux-Thunk 是一个用于处理 redux 异步 action 的中间件。
1. 什么是 Redux-Thunk？
在讲解 Nitro-Redux-Thunk 之前，先让我们回顾一下 Redux-Thunk，了解一下其背景和作用。在 Redux 中，middleware 可以拦截和处理 action，在它抵达 reducer 前对它进行预处理，Redux-Thunk 就是其中一种常见的 middleware。
中间件（middleware）功能是为了增强 dispatch，可以执行诸如记录日志、触发路由更新、处理更复杂的异步 action 等操作。在 Redux-Thunk 中间件中，通过延迟在 action creator 中的 action 发送来处理异步代码。这个单个 action creator 将返回一个 async 函数用于处理异步行为。
2. 为什么选用 Nitro-Redux-Thunk？
Nitro-Redux-Thunk 在 Redux-Thunk 的基础上做了更好的封装，提供了更加简单易用的 API，而且还对 Redux-Thunk 中一些的缺陷进行了修复，提高了代码的执行效率。此外，Nitro-Redux-Thunk 官方也提供了详细的中文文档和示例代码，对于初学 Redux 异步流程和 React 开发的同学来说，更为友好和易懂。
3. Nitro-Redux-Thunk 使用方法
3.1 安装
npm install nitro-redux-thunk --save
3.2 引入
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'nitro-redux-thunk';
import rootReducer from './reducers/index';
const middlewares = [thunkMiddleware];
const store = createStore(rootReducer, applyMiddleware(...middlewares));3.3 使用
添加异步 action creator，我们可以借助于 Nitro-Redux-Thunk 的 createThunkWithDependencies 方法，它接收一个对象，对象中包含主逻辑函数、依赖的其他 action creator 函数、返回 Promise 的函数等。下面是使用 Nitro-Redux-Thunk 发起异步 action 请求的示例。
-- -------------------- ---- -------
------ - ---------------------------- ----------------- - ---- --------------------
-- ---- ------- --- ------ -----
-------- ----------------------- -
------ ----- ---------- --------- - --------- -- -- -
-----------------------------------------
--- -
----- - ---- - - ----- ------------------------------------
-----------------------------------------------------
- ----- ------- -
----------------------------------------------
-
--
-
-- ------------- ------------------ ------- ---
----- ------------- ----------------- - -
---------- -- -- ------------------------------------ -- ----------------
--
----- -------------------------- - -------------------------------------------------- --------------
-- ------- ----- ------------------ --- -------------------------- -------- ----- ---3.4 执行流程
- 当一个发起了异步操作的 action creator 被分发到 Redux store，在 dispatch 过程中将把 action 对象发送给 thunkMiddleware。
- thunkMiddleware 检查 action 是否为一个函数，如果是，将拦截并执行这个函数，并传入 dispatch 函数本身作为这个函数的第一个参数。
- 这个被传入的 dispatch 可能被 thunk 内部多次调用。
- 如果 thunk 需要访问 Redux store 的当前状态，它可以从 getState() 方法中读取。
- 当 thunk 正常结束时，它应该 dispatch 一个新的 action，或者你也可以使用
createThunkWithDependencies所返回的 Promise。 - 当 dispatch 返回时，thunkMiddleware 会恢复它的任务，允许它发送一个 action 到 Redux store。
4. 结语
通过 Nitro-Redux-Thunk，我们可以让异步操作代码的编写更加顺畅和规范，同时让代码更加优雅高效，为我们的中大型项目提供了非常好的解决方案。相比于传统的回调函数代码，异步流程的设计方案是更加灵活和易于维护的，对于初学 Redux 和 React 的同学来说，这是非常有益的学习和实践过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b47c6eb7e50355dbf34