在 Redux 中，Action 是一种描述行为的对象，通常由 Action Creator 函数创建。Action Creator 函数主要有两个作用：生成 Action 对象，并将这个 Action 对象传递给 Reducer 函数。
在实际项目开发中，我们经常需要封装一些通用的 Action Creator 函数，以便在多个地方复用。本文将介绍如何封装 Redux 的 Action Creator 函数，并提供示例代码，帮助读者更好地理解。
1. 生成基本的 Action Creator 函数
一个最基本的 Action Creator 函数通常长这样：
function incrementCounter() {
return {
type: 'INCREMENT_COUNTER'
};
}这个函数可以用来生成一个 Action 对象，它表示增加计数器的操作。我们可以将这个函数封装起来，以便在其他地方方便地使用：
-- -------------------- ---- -------
------ -------- ------------------ -
------ ----------------- -
------ -
----- -----
-------- -------
--
--
-
------ ----- ---------------- - ----------------------------------这样一来，我们就可以在其他页面或组件中引用这个 Action Creator 函数，并将生成的 Action 对象传递给 Reducer 函数。
2. 传递参数
有时候，我们需要在生成 Action 对象的同时，传递一些参数。例如，我们希望在点击按钮时，将按钮的 id 作为参数传递给 Action Creator 函数。这个时候，我们需要对 createAction 函数进行修改：
-- -------------------- ---- -------
------ -------- ------------------ -
------ ----------------- -
------ -
----- -----
-------- ----------- --- - - ------- - ----
--
--
-
------ ----- ---------------- - ----------------------------------
------ ----- ------------ - ------------------------------这个 createAction 函数可以接受任意多个参数，并将它们合并成一个数组。如果只有一个参数，则直接返回这个参数。在上面的示例代码中，我们将按钮的 id 作为参数传递给 selectButton 函数。
3. 使用 thunk 中间件
有时候，我们需要在 Action Creator 函数中触发异步操作，例如向服务器发起请求，获取数据等等。这个时候，我们可以使用 Redux 的 thunk 中间件来处理。
在使用 thunk 中间件之前，我们需要对 createAction 函数进行修改：
-- -------------------- ---- -------
------ -------- ------------------ -
------ ----------------- -
-- ------- ---------------- - -- --- ----------- -
----- -------- - ---
----- --------- --------- - -----
------ ---------- -- -
---------------- - -------- -- ---------------------------
--------------- - ------- -- ----------------------- --------
---------- ----- -------- -------- ---
------ ---------
--
-
------ -
----- -----
-------- ----------- --- - - ------- - ----
--
--
-这个 createAction 函数可以处理异步操作，它接受一个回调函数作为最后一个参数。在生成 Action 对象时，我们会将这个回调函数打包在一个 Promise 中，并将 Promise 保存在 action.deferred 上。这个 Promise 可以用来监听异步操作的结果，例如请求成功或失败时，分别调用 resolve 和 reject 函数。
在使用 Action Creator 函数时，可以这样调用：
-- -------------------- ---- -------
----- --------- - ---------------------------
----------------------- ------ ------ -- -
-- ------- -
-- ----------
- ---- -
-- ----------
-
----这里的 fetchData 函数可以接受任意多个参数，最后一个参数是一个回调函数。在发送请求时，我们将这个回调函数包装成一个 Promise，保存在 action.deferred 上。在请求的结果返回后，我们可以根据结果调用 Promise.resolve 或 Promise.reject 函数，通知回调函数的执行结果。
4. 总结
本文介绍了如何封装 Redux 的 Action Creator 函数，并提供了示例代码。在实际项目中，封装好的 Action Creator 函数可以让我们更加高效地开发，并减少出错的可能性。希望读者能够对 Redux 的 Action Creator 函数有更加深入的理解，并在实际项目中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3a8c548841e9894feaf7e