Redux 是一种流行的 JavaScript 应用程序状态管理工具。它通过将状态存储在单一的 store 中，使得应用程序的状态更加可控和可预测。Redux 的 Action Creator 和 Thunk 中间件是 Redux 中非常重要的概念。在本文中，我们将深入理解这两个概念，以便更好地理解 Redux 的工作原理。
Action Creator
Action Creator 是一个简单的函数，它返回一个 action 对象。在 Redux 中，action 对象是描述应用程序状态变化的唯一途径。Action Creator 可以用来创建这些 action 对象。下面是一个简单的 Action Creator 的示例：
function incrementCounter() {
return { type: 'INCREMENT_COUNTER' };
}在这个示例中，incrementCounter 函数返回一个对象，该对象具有一个 type 属性，该属性描述了该 action 的类型。在本例中，type 属性的值为 'INCREMENT_COUNTER'。
我们可以使用这个 Action Creator 来分发一个 action。例如，我们可以使用 Redux 的 store.dispatch 方法来分发一个 action：
store.dispatch(incrementCounter());
在这个示例中，我们使用 incrementCounter 函数来创建一个 action，然后将其传递给 store.dispatch 方法。这将触发 Redux 的状态更新过程，该过程将根据该 action 的类型更新应用程序的状态。
Thunk 中间件
Thunk 中间件是一个函数，它接收 store 的 dispatch 和 getState 方法作为参数，并返回一个函数。这个返回的函数接收一个 dispatch 方法作为参数，并且可以在需要时调用它。Thunk 中间件通常用于处理异步操作。
下面是一个简单的 Thunk 中间件的示例：
function fetchData(url) {
return function(dispatch, getState) {
return fetch(url)
.then(response => response.json())
.then(json => dispatch({ type: 'FETCH_DATA_SUCCESS', data: json }));
};
}在这个示例中，fetchData 函数返回一个函数，该函数接收 dispatch 和 getState 方法作为参数。在返回的函数中，我们使用 fetch 方法来获取数据，并将其解析为 JSON 格式。然后，我们使用 dispatch 方法来分发一个 action，该 action 描述了数据获取成功的事件，并将获取到的数据作为参数传递给该 action。
我们可以使用 Redux 的 applyMiddleware 方法来将 Thunk 中间件添加到 Redux store 中：
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
const store = createStore(reducer, applyMiddleware(thunkMiddleware));在这个示例中，我们使用 applyMiddleware 方法将 thunkMiddleware 添加到 Redux store 中。
深入理解
现在我们已经了解了 Action Creator 和 Thunk 中间件的基本知识，让我们深入了解它们的工作原理。
Action Creator 的作用
Action Creator 提供了一种简单的方式来创建 action 对象。在 Redux 中，action 对象是描述应用程序状态变化的唯一途径。Action Creator 可以让我们更加方便地创建这些 action 对象。
Thunk 中间件的作用
Thunk 中间件提供了一种处理异步操作的方式。在 Redux 中，我们不能直接在 action 中执行异步操作，因为 action 是纯粹的 JavaScript 对象，不能包含异步操作。Thunk 中间件提供了一种方式来处理这种情况。
在 Thunk 中间件中，我们可以返回一个函数，该函数接收 dispatch 和 getState 方法作为参数，并可以在需要时调用 dispatch 方法来分发 action。这使得我们可以在返回的函数中执行异步操作，并在操作完成后调用 dispatch 方法来分发 action。
示例代码
下面是一个示例代码，它演示了如何使用 Action Creator 和 Thunk 中间件来实现一个异步计数器：
-- -------------------- ---- -------
-- ------ -------
-------- ------------------ -
------ - ----- ------------------- --
-
-- ----- ---
-------- ----------------------- -
------ ------------------ --------- -
------------- -- -
-----------------------------
-- ------
--
-
-- -------
-------- -------------------- - -- ------- -
------ ------------- -
---- --------------------
------ ----- - --
--------
------ ------
-
-
-- -----
----- ----- - --------------------------- ----------------------------------
-- -- ------ ------- ---- ------
-----------------------------------
-- -- ----- ------- ------
----------------------------------------在这个示例中，我们首先定义了一个 Action Creator，它返回一个描述增加计数器的 action 对象。接下来，我们定义了一个 Thunk 中间件，它返回一个函数，该函数在 1 秒后调用 dispatch 方法来分发一个增加计数器的 action。最后，我们定义了一个 reducer，它处理增加计数器的 action。我们使用 createStore 方法创建了一个 Redux store，并将 thunkMiddleware 添加到其中。然后，我们使用 store.dispatch 方法来分发同步和异步 action。
结论
在本文中，我们深入理解了 Redux 的 Action Creator 和 Thunk 中间件。我们了解了 Action Creator 的作用和使用方法，以及 Thunk 中间件的作用和使用方法。我们还演示了如何使用这些概念来实现一个异步计数器。这些概念对于理解 Redux 的工作原理非常重要，并且可以让我们更加方便地管理应用程序的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6764df62856ee0c1d42f35ac