Redux 是一种 JavaScript 状态管理库，它可以帮助我们管理应用程序中的状态。但是如果使用 redux 时必须在 reducer 中将所有状态的修改操作尽可能的干净、简洁、无副作用的原则，对于异步操作的处理就稍显复杂。这时我们需要 Redux-Thunk 来帮助我们处理 redux 中的异步操作。
Redux-Thunk 是什么？
Redux-Thunk 是一个 redux 的中间件，它允许我们在 redux 中编写异步操作。 Redux-Thunk 帮助我们处理 redux 中的异步操作。其核心作用是将闲置的异步操作存储为 Thunk，该对象包含函数的异步操作。Redux-Thunk 中间件允许您编写 actions creators，可以返回一个函数而不是一个 action 对象。该函数接收 dispatch 方法作为第一个参数，可以在操作完成时调用，或者使用 getState 获取 store 的当前状态。
Redux-Thunk 的优势
使用了 Redux-Thunk 中间件，我们可以更方便地管理异步操作，当你需要在异步操作完成之后再更新 Redux 中的状态时，可以直接 dispatch 一个 action。使用 Redux-Thunk 的好处不仅仅是可以在 redux 中加入异步操作，还可以帮助我们处理预处理和异常处理，使代码更加可读和易维护。
Redux-Thunk 的使用
安装和引入
在使用 Redux-Thunk 前必须安装 redux-thunk 依赖包， 使用 npm 安装，命令如下：
npm install redux-thunk
安装完成后，在 redux createStore() 函数中将 reduxThunk 作为 applyMiddleware() 的参数，代码如下：
import { createStore, applyMiddleware } from "redux"; import thunk from "redux-thunk"; import rootReducer from "./reducers"; const store = createStore(rootReducer, applyMiddleware(thunk));
对于异步操作的 actions creators 进行修改
在使用 Redux-Thunk 之前，我们会这样编写 actions creators：
-- -------------------- ---- ------- ------ ----- ---------- - -- -- - ------ ---------- -- - ------------------------------ ----- -------------------------------------------------- ---------------- -- - ----- ----- - -------------- ----------------------------------- -- -------------- -- - ----- -------- - -------------- -------------------------------------- --- -- --展开代码
使用 Redux-Thunk 后，我们定义 actions creators 并将其异步部分封装在函数中:
-- -------------------- ---- ------- ------ ----- ---------- - -- -- - ------ ----- ---------- -- - --- - ------------------------------ ----- -------- - ----- -------------------------------------------------------- ----- ----- - -------------- ----------------------------------- - ----- ------- - ----- -------- - -------------- -------------------------------------- - -- --展开代码
示例代码
这里是一个简单的示例代码，展示了在 React 中使用 Redux-Thunk 进行挂载前向 API 发起请求，获得数据并更新 store 的流程，该示例下载后可在本地进行运行：
actions.js
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----- -------- - ----------- ------ ----- ----------- - -------------- ------ ----- ------------------- - ---------------------- ------ ----- ------------------- - ---------------------- ------ ----- ------------------- - ---------------------- ------ ----- ------- - ------ -- - ------ - ----- --------- -------- ----- -- -- ------ ----- ---------- - -------- -- - ------ - ----- ------------ -------- ------- -- -- ------ ----- ----------------- - -- -- - ------ - ----- -------------------- -- -- ------ ----- ----------------- - ------- -- - ------ - ----- -------------------- -------- ------ -- -- ------ ----- ----------------- - ------- -- - ------ - ----- -------------------- -------- ------ -- -- -- ---- ----- ------ ----- ---------- - -- -- - ------ ----- ---------- -- - --- - ------------------------------ ----- -------- - ----- ------------------------------------------------------------------------------------------ ----- ----- - ------------------- ----------------------------------- - ----- ------- - ----- -------- - -------------- -------------------------------------- - -- --展开代码
reducer.js
-- -------------------- ---- ------- ------ - --------- ------------ -------------------- -------------------- -------------------- - ---- ------------ ----- ------------ - - -------- ------ ------ --- ------ --- -- ----- ------- - ------ - ------------- ------- -- - ------ ------------- - ---- -------------------- ------ - --------- -------- ----- -- ---- -------------------- ------ - --------- -------- ------ ------ --------------- ------ --- -- ---- -------------------- ------ - --------- -------- ------ ------ --- ------ --------------- -- ---- --------- ------ - --------- ------ ---------------- ---------------- -- ---- ------------ ------ - --------- ------ ------------------------- -- ------- --- ---------------- -- -------- ------ ------ - -- ------ ------- --------展开代码
App.js
-- -------------------- ---- ------- ------ - ------------ ----------- - ---- -------------- ------ - ---------- - ---- ------------ -------- ----- - ----- -------- - -------------- ----- ----- - ------------------- -- ------------- ----- ------- - ------------------- -- --------------- ----- ----- - ------------------- -- ------------- ------------ -- - ----------------------- -- ------------ ------ - ---- ---------------- -------- - - ------------------- - - ----- - - --- -------- ------ ----- --------------- - - - -- -------- --------- ---- ----------------- -- - --- ------------------------------ --- ----- --- -- ------ -- - ------ ------- ----展开代码
总结
Redux-Thunk 使得对于 redux 中的异步操作变得简便，我们可以封装散布了的异步操作，并将其封装为纯函数。使用 Redux-Thunk，我们可以更加灵活地管理应用程序中的状态，更加优雅地执行数据的异步操作。而这仅仅是 Redux-Thunk 的其中一种用法，它还可以帮助我们处理预处理以及异常处理，使代码更加优雅、可读、易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fa2f9cf6b2d6eab3150651
