什么是 Redux？
Redux 是一个 JavaScript 应用程序的状态容器，它可以管理整个应用程序的状态。Redux 是为了解决 React 应用程序中状态管理的问题而创建的。它可以帮助您更好地组织和管理应用程序的状态。
Redux 的工作原理
Redux 的核心概念是 Store、Action 和 Reducer。
- Store：存储整个应用程序的状态
- Action：描述发生的事件
- Reducer：处理 Action 并更新 Store 中的状态
当一个事件（Action）发生时，Redux 会将该事件发送到 Reducer 中。Reducer 会根据事件类型来更新 Store 中的状态。一旦 Store 中的状态更新，Redux 将会通知所有订阅了该状态的组件。
Redux 的核心 API
createStore
createStore 是 Redux 中最重要的函数之一。它用于创建一个存储应用程序状态的 Store。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------getState
getState 用于获取当前 Store 中的状态。
console.log(store.getState()); // { count: 0 }dispatch
dispatch 用于向 Store 中发送一个事件（Action）。
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }subscribe
subscribe 用于订阅 Store 中状态的变化。
store.subscribe(() => {
console.log(store.getState());
});Redux 的示例代码
下面是一个简单的计数器示例，它演示了如何使用 Redux 来管理应用程序的状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
----- ------- ------- --------------- -
--------------- - -- -- -
---------------- ----- ----------- ---
--
--------------- - -- -- -
---------------- ----- ----------- ---
--
-------- -
------ -
-----
---------------------------------
------- -----------------------------------------
------- -----------------------------------------
------
--
-
-
----- ------ - -- -- -
------------------------ --- ---------------------------------
--
---------
------------------------在上面的代码中，我们创建了一个名为 Counter 的 React 组件。该组件包含两个按钮，分别用于增加和减少一个计数器的值。当用户点击这些按钮时，组件会调用 store.dispatch 函数来发送一个事件（Action），从而更新 Store 中的状态。组件还会订阅 Store 中状态的变化，以便在状态发生变化时重新渲染。
结论
Redux 提供了一种简单而强大的方式来管理应用程序的状态。它可以帮助您更好地组织和管理应用程序的状态，从而使您的代码更加可靠和可维护。希望这篇 Redux 实用教程对您有所帮助，让您更好地理解 Redux 的工作原理和 API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675bc3dea4d13391d8f7ed90