什么是 Redux？
Redux 是一种状态管理库，为 JavaScript 应用程序提供可预测的状态容器。它通常与 React 一起使用，但它并不是为 React 设计的，可以在任何 JavaScript 应用程序中使用。Redux 主要由三个部分组成：
- store: 是一个 JavaScript 对象，存储整个应用程序的状态。
- actions: 定义应用程序中可能发生的各种操作，例如添加新数据、删除数据、更新数据等等。
- reducers: 接收 actions，根据当前的状态和 action 对应的数据更新 store 中的数据。
Redux 如何在 React 之外使用？
Redux 不仅仅可以和 React 一起使用，还可以在任何 JavaScript 应用程序中使用。下面我们将详细介绍如何在 React 之外使用 Redux。
1、创建 Redux store
第一步，我们需要创建一个 Redux store。这个 store 属于 Redux 的核心，用来存储应用程序的状态。创建 store 需要使用 Redux 的 createStore() 函数。下面是一个创建 Redux store 的示例代码：
------ - ----------- - ---- --------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------在这个示例代码中，我们定义了一个初始状态 initialState，这里只有一个名为 count 的属性。接着，我们定义了 reducer 函数，根据不同的 action 类型更新 state。最后，使用 createStore() 函数创建了一个 store。
2、在组件中使用 Redux store
有了 Redux store 以后，我们需要在组件中使用它。在 React 之外使用 Redux，我们需要使用 Redux 提供的一些方法来访问 store 中的状态，例如 getState()、dispatch() 和 subscribe()。
下面是一个使用 Redux store 的示例代码：
------ - ----------- - ---- --------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
-------- --------- -
----- ------- --------- - ---------------------------
-------- ------------- -
---------------- ----- ----------- ---
-
-------- ------------- -
---------------- ----- ----------- ---
-
------------ -- -
----- ----------- - ------------------ -- -
---------------------------
---
------ ------------
-- ----
------ -
-----
---------- ------------------
------- ----------------------------------------
------- ----------------------------------------
------
--
-
------------------------ --- ---------------------------------在这个示例代码中，我们首先使用 getState() 方法获取了当前 store 中的状态，然后在 useState() 函数中设置了初始状态。接着，我们使用 dispatch() 方法来分别增加和减少计数值。最后，我们使用 useEffect() 函数来订阅 store 中的状态，并在每次状态改变时更新组件中的状态。
3、在应用程序中分发 Redux action
使用 dispatch() 方法可以分发 Redux action，但是如果你的应用程序非常庞大，可能存在多个 Redux store 实例。在这种情况下，我们需要使用 Redux 提供的 bindActionCreators() 函数来将 action 和 dispatch 绑定起来。
下面是一个使用 bindActionCreators() 函数的示例代码：
------ - ------------ ------------------ - ---- --------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
----- ------- - -
---------- -- -- -- ----- ----------- ---
---------- -- -- -- ----- ----------- ---
--
----- - ---------- --------- - - --------------------------- ----------------
------------ -- --- ---------------- ----- ----------- --
------------ -- --- ---------------- ----- ----------- --在这个示例代码中，首先我们定义了一个名为 actions 的对象，其中包含了我们需要分发的两个 action 类型。接着，我们使用 bindActionCreators() 函数将 actions 绑定到 store.dispatch() 方法上。最后，我们使用绑定后的 increment() 和 decrement() 方法分别分发了两个 Redux action。
结论
Redux 是一个非常实用的状态管理器，可以帮助开发者在应用程序中管理状态。虽然 Redux 通常与 React 一起使用，但是它并不是 React 的一部分，可以在任何 JavaScript 应用程序中使用。在 React 之外使用 Redux 需要借助 Redux 提供的一些方法来访问 store 中的状态，例如 getState()、dispatch() 和 subscribe()。如果存在多个 Redux store 实例，我们需要使用 bindActionCreators() 函数来将 action 和 dispatch 绑定起来。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67111194ad1e889fe2fd68fe