在现代的前端开发中，JavaScript 程序的复杂度越来越高，状态管理成为了许多开发者必不可少的工作。Redux 是一个非常流行的状态管理库，但是它的使用也有一定的门槛。因此，我们推荐使用 redux-relax-thunk 这个 npm 包来简化 Redux 的使用。
安装和引入
你可以使用 npm 或 yarn 来安装 redux-relax-thunk，也可以直接在代码中使用 CDN 引入。以下是 npm 的安装方式：
npm install redux-relax-thunk --save
引入方式如下：
import { createStore } from 'redux';
import relaxMiddleware from 'redux-relax-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(relaxMiddleware));基本使用
redux-relax-thunk 的主要功能就是使得我们能够在 Redux 中使用异步操作。简单来说，就是我们可以在 action 中返回一个函数，这个函数可以在异步操作结束后再触发 dispatch。
以下是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
----- --------- - -- -- -
------ ---------- -- -
---------- ----- ------------------ ---
----------------------
---------------- -- -
----------
----- -------------------
-------- -------------
---
--
-------------- -- -
----------
----- -------------------
-------- -------------
---
---
--
--在这个示例中，我们使用了 axios 这个库来发起异步请求。首先，我们返回了一个函数，这个函数接收一个 dispatch 参数。在这个函数中，我们首先 dispatch 了一个 FETCH_USER_REQUEST 的 action，然后发起了异步请求，如果请求成功了，我们会 dispatch 一个 FETCH_USER_SUCCESS 的 action，如果请求失败了，我们会 dispatch 一个 FETCH_USER_FAILURE 的 action。这样就完成了一个完整的异步操作了。
带参数的异步操作
有时候我们需要在异步操作中传递一些参数。下面是一个带参数的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- -------------------------- - -----------------------------
------ ----- -------------------------- - -----------------------------
------ ----- -------------------------- - -----------------------------
----- ---------------- - -------- -- -
------ ---------- -- -
---------- ----- -------------------------- ---
----------------------------------------
---------------- -- -
----------
----- ---------------------------
-------- -------------
---
--
-------------- -- -
----------
----- ---------------------------
-------- -------------
---
---
--
--在这个示例中，我们定义了一个 fetchUserFriends 函数，并传入了一个 userId 参数。在发起异步请求时，我们使用了 ES6 模板字符串来拼接请求的 URL。
拓展：redux-saga
redux-relax-thunk 是一个基础的异步处理方案，它的优点是使用简单，但它也有它的局限性：对于复杂的异步场景，它可能无法满足我们的需求。这时候，我们可以使用更为强大的 redux-saga。
redux-saga 更适用于处理复杂的异步场景，例如处理 WebSocket 或长轮询之类的异步操作。如果你在处理异步操作时遇到了困难，那么 redux-saga 可能是一个不错的选择。
小结
redux-relax-thunk 是一个简单、易用的 npm 包，它的主要功能是简化异步操作在 Redux 中的使用。通过它的帮助，我们可以更加轻松地完成异步操作。在实际的项目中，你可能会遇到更加复杂的异步场景，这时候你可以考虑使用 redux-saga 等更加强大的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607d81e8991b448deb18
