NgRx/Store V4: Redux 的装饰器和运算
NgRx/Store是一个状态管理库，它基于Redux的理念，利用RxJS进行状态管理。为了提高代码质量，NgRx/Store V4开发者引入了一些新的特性，其中最引人注目的是Redux的装饰器和运算。通过本文，我们将详细介绍这些新的特性，并提供示例代码和学习指导。
Redux的装饰器
Redux的装饰器是在V4中引入的一个新特性。装饰器是一种特殊的语法，它允许我们向一个类、方法等普通的JavaScript结构添加元数据，这些元数据可以用来修改类、方法的行为，并且可以在设计的时候灵活地配置。
在NgRx中，装饰器是通过es7的@classDecorator来实现的。这个装饰器可以被应用在一个类声明之前，并且被用于修改创建的Store类的行为。下面是一个简单的示例代码，展示了如何使用装饰器。
--------
----- ------
--
------ ----- --------- -
------------------- ----- ----------- -
-
---------------- ---------
------- -------------------
-----------
--------- -------------- -
------ ------ -------------
-
-在上面的代码中，@store这个装饰器为一个类创建了一个Store，并把这个Store注册到Redux Store中。name属性用来定义这个Store在Redux Store中的名称，HttpClient用来发起HTTP请求。
@select装饰器用来选择一个状态。books$是一个Observable，它发出了所有书籍的列表。最后的dispatch()装饰器用来定义一个类型为GetBooksAction的行为。这个行为可以被调用，把它发出的信息分配给Redux Store。
操作符
NgRx V4最令人着迷的特性是操作符。它是RxJS的一个强大功能，它被添加到了NgRx中，以支持高效的状态管理。操作符是一些我们在观察一个Observable时可以使用的方法，它们可以让我们以各种方式处理问题。
例如，我们可以使用distinctUntilChanged()操作符来减少重复推送到Store的数据。我们也可以使用debounceTime(500)来在半秒钟之后推送数据到Store，以避免过多的请求。下面是一个使用@Effect操作符创建异步数据的示例代码。
-------------
------ ----- ----------- -
------------------- ------------ ------------ ------- --------- -------- -
-
---------
-------- -------------------------------- - ------------------- -
-------------------
--------------------------
------------ -- ---------------------------
----------- -- --- ------------------------------
---------------- -- ------ -------------------------
--
-在上面的代码中，我们首先定义了一个@Injectable类BookEffects，这个类从bookService取得HTTP请求。getALl$方法是一个Observable，它跟踪触发一个START_GET_BOOKS行为，并且在前一个observable结束之前订阅下一个。
map操作符把包含书籍的响应转换成一个新的GetBooksSuccessAction实例，然后捕获catchError来创建一个GetBooksFailAction对象。最后，我们可以在Store类中使用dispatch()操作符，把GetBooksSuccessAction或GetBooksFailAction中的信息分配给Redux Store。
结论
通过引入Redux的装饰器和运算，NgRx V4可以更好地管理和减少状态，并获得更好的性能。通过本文，我们希望读者可以对NgRx/Store V4有一个更深入的了解，并能够使用这个库更好地管理你的应用程序状态。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66fbcb374471362601632a9a