什么是 Redux？
Redux 是一种流行的状态管理库，它可以帮助我们有效地管理应用程序的状态。Redux 能够解决应用程序中的许多问题，例如数据流、应用程序状态和异步操作等问题。Redux 中的状态是可预测和不可变的，这意味着状态会随着时间的推移而变化，但是它们的状态不会在未经授权的情况下进行更改。
Redux 设计原则
Redux 的设计原则基于三个核心原则：
单一的数据流：整个应用程序的状态保存在一个对象中，这个对象也称为存储库或存储。
可预测的状态管理：应用程序的行为和变化是可预测和可控的。
纯函数：Redux 推崇纯函数来处理数据，每个函数都是无副作用的，同样的输入始终导致相同的输出。
在 Angular 项目中使用 Redux
下面介绍如何在 Angular 项目中使用 Redux。
- 安装 Redux 依赖
Redux 安装非常方便，只需在项目中运行以下命令：
npm install redux --save
- 创建 Redux 存储库
我们可以通过 Redux 中提供的 createStore 方法来创建 Redux 存储库。存储库将包含应用程序中的所有状态，并在应用程序中进行传递。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - ---
-------- ----------------- - ------------- ------- -
------ ------------- -
-- -- ------
--------
------ ------
-
-
----- ----- - -------------------------这里的 rootReducer 是一个函数，它将处理 Redux 存储库的所有状态更改。实际上，每个状态更改都是一个 action 类型对象。
- 连接 Redux 和 Angular 应用程序
在 Angular 应用程序中连接 Redux ，需要安装 Rendux 提供的 Angular 框架库：
npm install @ngrx/store --save
在 Angular 中，我们可以使用以下方法将 Redux 连接到我们的应用程序中：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
-----------
-------- -
--------------
----------------------- -- -----
--
------------- -
------------
--
---------- -
------------
-
--
------ ----- --------- - -StoreModule将整个Redux应用包装成一个 StoreProvider，可以在其他组件中使用 Angular Store 类库来进行状态的变化响应。
- 创建 Action 和 Reducer
就像其他 Redux 应用程序一样，我们需要定义一个 action 和 reducer。Action是一个对象，它包含一个操作类型和一些相关的数据。例如，如果我们想更新一个名为counter的值，我们可以定义一个名为UPDATE_COUNTER的操作类型和一个包含计数器值的更新数据。Reducer是一个操作符，用于更改存储库中存储的状态。
下面是一个计数器应用程序的示例：
-- -------------------- ---- ------- -- -- ------ ------ ----- --------- - ----------------------- ------------ ------ ----- --------- - ----------------------- ------------ -- --------- ------ ----- ------------ - -- ----- --------------- - -------------- ------------- ------------- ----- -- ----- - --- ------------- ----- -- ----- - -- -- ------ -------- --------------------- ------- - ------ ---------------------- -------- -
在这个示例中，我们定义了两个操作类型：increment 和 decrement，并定义了一个简单的计数器reducer。
- 将 action 和 reducer 添加到 Redux 存储库中
现在我们需要将新的 reducer 和 action 添加到 Redux 存储库中，我们可以通过 store.dispatch() 方法来触发一个 action。
-- -------------------- ---- -------
------ - ----- - ---- --------------
------ - ---------- --------- - ---- ----------------------------
------------
--------- -----------
--------- -
-----
------- --------------------------------
-- ----- --
------- --------------------------------
------
-
--
------ ----- ------------ -
------ -------
------------------- ------ ------- ------ ------ --- -
------------------------------------- -- -
---------- - ----
---
-
----------- -
---------------------------------
-
----------- -
---------------------------------
-
-在这个示例中，我们创建了一个计数器的按钮，并处理了递增和递减的事件。我们还订阅了存储库中的计数器值，以便在存储库中发生任何更改时更新页面。
- 监听状态变化
在组件中监听 Store 的变化
this.store.select('count').subscribe((val) => {
this.count = val;
});通过 store.select() 方法，我们可以监听每次 Store 中某个变量的变化。
总结
Redux 可以在 Angular 应用程序中帮助我们管理状态，并提供了一种可预测和可控的状态管理方式。通过Redux的设计原则，我们可以更好地维护应用程序的状态，并更加安全地编写代码。在应用程序中使用 Redux，可以通过 Store 提供的响应状态机制来监听状态变化，并且可以更清晰地维护代码的结构和逻辑。最后，我们为大家提供了一个简单的计数器示例，它可以帮助初学者更好地理解和掌握Redux的基本使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c3849483d39b488178615d