如果你是前端开发人员，你可能知道Thunk的作用，它是一个非常常用的异步编程方案。而handy-thunks是一个基于Redux的Thunk解决方案，可以帮助你更好地使用Thunk。本文将为你提供handy-thunks的详细使用指南和示例代码。
什么是Thunk？
简单来说, Thunk是一个包装器（Wrapper），用来把某个计算推迟到函数调用的时候进行。在Javascript中是一个很常见的模式。其实现方式是利用函数闭包的特性，将需要推迟的计算放到函数中，进行异步操作或者计算。在Redux中，Thunk主要用于解决异步请求的问题。
什么是handy-thunks？
handy-thunks是一个基于Redux的Thunk方案。它可以让你更好地管理Thunk action creator，并提供了一些常用的Thunk函数。手动处理Thunk可能会很棘手，而handy-thunks可以让这一过程变得更加容易。
handy-thunks中包含了若干常用的Thunk creator，例如thunkSuccess, thunkFailure, thunkRequest等等。它们可以帮助你更好地处理不同的异步请求。
安装handy-thunks
在开始使用handy-thunks之前，你需要安装它。你可以使用npm进行安装。在终端界面中，进入你的项目文件夹并输入以下命令：
npm install handy-thunks
安装完成后，你就可以在代码中使用它了。
开始使用handy-thunks
定义Thunk creator
定义一个简单的Thunk creator，你需要使用handy-thunks提供的createThunk函数。它对于创建最简单的Thunk creator很有用。
下面是一个例子，展示了如何定义一个简单的Thunk creator：
import { createThunk } from 'handy-thunks'
const myThunk = createThunk('MY_THUNK', ({ dispatch }) => {
dispatch({ type: 'ACTION_ONE' })
dispatch({ type: 'ACTION_TWO' })
})上面的代码中，Thunk creator使用createThunk函数创建。该函数接受两个参数：第一个是Thunk的名称，需要在触发action时使用；第二个是一个回调函数，它接受一个对象，其中包含了dispatch、getState和其他任何你需要的内容。
在回调函数内部，我们调用了两次dispatch，分别对应两个action类型为ACTION_ONE和ACTION_TWO。
使用内置的Thunk creator
handy-thunks还内置了许多常见的Thunk creator，你可以直接使用它们。这样可以帮助你更快速地处理不同的异步操作。
以下是一些内置的Thunk creator：
thunkSuccess
使用thunkSuccess时，如果异步操作成功，将会触发一个action，其中包含了请求的结果。如果失败，则会触发一个thunkFailure action。
import { thunkSuccess } from 'handy-thunks'
const myThunk = thunkSuccess('MY_THUNK', (params) => {
return fetch('/your-api-url')
.then(res => res.json())
})上面的代码是一个完整的例子，展示了如何使用thunkSuccess。在then中，我们解析了异步请求的结果，并返回一个Promise。handy-thunks会自动帮助我们处理异步操作的状态。
thunkFailure
thunkFailure和thunkSuccess最大的区别在于，它是用于处理异步操作失败的。
-- -------------------- ---- -------
------ - ------------ - ---- --------------
----- ------- - ------------------------ -------- -- -
------ ----------------------
--------- -- -
-- --------- ----- --- ---------------
------ ----------
--
--在如上例子中，我们仍然是使用了一个异步请求。区别在于，我们使用了一个条件语句来处理请求状态。如果请求状态异常，它将抛出一个错误，该错误将被传递到thunkFailure中。handy-thunks将自动处理失败的情况。
thunkRequest
thunkRequest和前面两个函数略有区别。它会在异步操作开始时触发一个action。这对于显示加载指示器或更改APP状态很有用。
import { thunkRequest } from 'handy-thunks'
const myThunk = thunkRequest('MY_THUNK', (params) => {
return fetch('/your-api-url')
.then(res => res.json())
})以上的代码展示了如何定义一个thunkRequest函数。handy-thunks会自动处理异步操作的请求，以便我们可以更轻松地跟踪异步操作的状态。
结论
handy-thunks是一个非常实用的Thunk解决方案，可以帮助你更好地管理异步操作。通过本文，你能够了解handy-thunks的基本用法，并能够使用它的内置Thunk creator。
如果你想尝试更多的Thunk creator，可以查看handy-thunks的文档。在使用时，需要谨慎考虑异步操作的状态，并使用适当的Thunk creator进行处理。这有助于优化你的应用程序的性能和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1e99