简介
NgRx 是一个基于 Redux 架构的 Angular 状态管理库，它提供了统一的数据流方案，简化了大型应用的状态管理。在实现复杂的流程控制时，我们可以使用 Redux 的思想和逻辑来设计和实现程序。
本文将介绍如何在 NgRx 中使用 Redux 逻辑实现流程控制。 我们将使用一个简单的示例来说明如何设计和实现一个简单的流程控制方案。
示例
假设我们正在构建一个图书管理应用程序，该应用程序具有以下功能：
- 用户可以添加、编辑和删除书籍。
- 用户可以发布、下架和更新书籍。
流程控制如下所示：
- 用户添加新书籍。
- 用户发布新书籍。
- 系统通知管理员审核新书籍。
- 管理员审核新书籍。
- 审核通过后，系统将新书籍上架。
- 用户可以编辑、下架和更新书籍。
在此示例中，我们使用 Redux 的思想和逻辑来实现控制流程。我们将在应用程序中使用以下实体：
- 书籍
- 用户
- 状态
步骤
- 创建一个 Actions 类，用于定义状态转换的操作。在示例中，我们需要创建以下操作：
- AddBookAction
- PublishBookAction
- NotifyManagerAction
- VerifyBookAction
- ApproveBookAction
- EditBookAction
- UnpublishBookAction
- UpdateBookAction
每个操作都需要一个类型和相应的有效负载。
------ - ------ - ---- -------------- ------ ----- ------------- ---------- ------ - -------- ---- - ------- --- ------ ------------------ -------- ---- -- - ------ ----- ----------------- ---------- ------ - -------- ---- - ------- ------- ------ ------------------ -------- ---- -- - ------ ----- ------------------- ---------- ------ - -------- ---- - ------- ------ --------- ------------------ -------- ---- -- - ------ ----- ---------------- ---------- ------ - -------- ---- - ------- ------ ------ ------------------ -------- ---- -- - ------ ----- ----------------- ---------- ------ - -------- ---- - ------- ------- ------ ------------------ -------- ---- -- - ------ ----- -------------- ---------- ------ - -------- ---- - ------- ---- ------ ------------------ -------- ---- -- - ------ ----- ------------------- ---------- ------ - -------- ---- - ------- --------- ------ ------------------ -------- ---- -- - ------ ----- ---------------- ---------- ------ - -------- ---- - ------- ------ ------ ------------------ -------- ---- -- - ------ ---- ----------- - - ------------- - ----------------- - ------------------- - ---------------- - ----------------- - -------------- - ------------------- - -----------------
- 创建一个 Reducers 类，用于定义每个操作时数据的状态变化。在示例中，我们需要设计以下状态：
- books：图书列表。
- book：选定的书籍。
- status：当前的状态。
------ - ------ - ---- --------------
------ -
--------------
------------------
--------------------
-----------------
------------------
---------------
--------------------
-----------------
- ---- -----------------
------ --------- --------- -
------ ------
----- ----
------- -------
-
----- ------------- --------- - -
------ ---
----- ---
------- ----------
--
------ -------- ----------------- - ------------- ------- -------- --------- -
------ ------------- -
---- ------- --- ------ -
------ -
---------
----- ---------------
------- ------
--
-
---- ------- ------- ------ -
------ -
---------
------- -------------
--
-
---- ------- ------ --------- -
------ -
---------
------- -----------
--
-
---- ------- ------ ------ -
------ -
---------
------- ------------
--
-
---- ------- ------- ------ -
------ -
---------
------- -----------
--
-
---- ------- ---- ------ -
------ -
---------
----- ---------------
------- ----------
--
-
---- ------- --------- ------ -
------ -
---------
------- ---------------
--
-
---- ------- ------ ------ -
------ -
---------
----- ---------------
------- ----------
--
-
-------- -
------ ------
-
-
-- 创建一个 Effects 类，用于处理异步操作。在示例中，我们需要创建以下效果：
- AddBookEffect：添加书籍和通知管理员审核书籍。
- VerifyBookEffect：验证新书籍并通知用户书籍已被审核。
- PublishBookEffect：发布新书籍并通知用户书籍已上架。
- UnpublishBookEffect：下架书籍并通知用户书籍已下架。
------ - ---------- - ---- ----------------
------ - ----- - ---- --------------
------ - -------- ------------- ------ - ---- ----------------
------ -
--------------
--------------------
-----------------
------------------
------------------
--------------------
- ---- -----------------
------ - ---------- --- - ---- -----------------
-------------
------ ----- ----------- -
------------------- --------- -------- ------- ------ ----------- --
-------------- - --------------- --
-------------------
-------------- --- -------
------------------ -------------- -- -
----------------------- -------------------------------------
------ ---
--
-
--
----------------- - --------------- --
-------------------
-------------- ------ -------
------------------ ----------------- -- -
----------------------- -----------------------------------
------ ---
--
-
--
------------------ - --------------- --
-------------------
-------------- ------- -------
------------------ ------------------ -- -
------ ---
--
-
--
-------------------- - --------------- --
-------------------
-------------- --------- -------
------------------ -------------------- -- -
------ ---
--
-
--
-- 创建一个组件，用于呈现图书列表并处理用户操作。
在示例中，我们将创建一个 BookListComponent 和 BookDetailComponent：
------ - ---------- ------ - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- - ---- -------
------ - --------- - ---- ------------------------
------ - ------------- - ---- ------------------------
------------
--------- ----------------
--------- -
--------------
----
--- ----------- ---- -- ------ - -------
-- --------- -- --- -------------- - ----------- - ------------- ---
------- ----------------------------------
------- --------------------------------------
-----
-----
--
--
------ ----- ----------------- ---------- ------ -
------- ----------------
------------------- ------ ----------------- --
---------- -
----------- - ------------------------- -- -------------
-
---------- -
----------------------- ---------------------
-
------------ --
------------- --
--------------- --
------- - ---------- ----- - ---- ----------------
------ - ----- - ---- --------------
------ - --------- - ---- ------------------------
------ - -------------- - ---- ------------------------
------------
--------- ------------------
--------- -
---- -------------
------ --------- -------
------- ------------------------------
------- ------------------------------------
------- ----------------------------------------
------
--
--
------ ----- ------------------- -
-------- ----- ----
------------------- ------ ----------------- --
------ -
----------------------- ---------------------------
-
--------- --
----------- --
-这些组件将呈现书籍列表，允许用户添加、编辑和删除书籍，并允许用户发布、下架和更新书籍。
结论
在本文中，我们介绍了如何在 NgRx 中使用 Redux 逻辑实现流程控制。我们创建了一个示例应用程序来演示如何设计和实现控制流程，以及如何使用组件来呈现数据。
使用 Redux 的复杂应用程序中的状态管理将变得更加简单。借助于 NgRx 和 Redux 的思想和逻辑，我们可以更好的理解应用程序的控制流程，并更好地管理状态。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671c5cf19babaf620fb07080