Shulou(Shulou.com)06/01 Report--

This article mainly explains "does Angular need state management?" the content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "does Angular need state management?"

A state management framework is not required in Angular.

First of all, there is a concept of Service in Angular. Although Angular basically does nothing for Service and does not even provide a base class BaseService, the following two features determine that it is easy to implement a third party mentioned above through Service in Angular.

After defining a Service in Angular, you can easily inject the service into the component through dependency injection, so that the component can call various methods provided by Service.

We can store the state data needed by the component in Service, and then set the injected Service to public, so that the data in Service can be bound directly through expressions in the template.

Based on the above two features, basically, when using Angular to develop applications, once you encounter sharing data between components, you can easily use Service to deal with it (of course, do a SPA single-page application, even if there is no shared data between components, it is recommended to use Service as the data layer to maintain business logic). The official hero editor example MessageService, which directly exposes the service bound on the component template, is as follows Therefore, unlike React, Angular does not have to rely entirely on the state management framework to share data between components. :

Export class MessageService {

Messages: string [] = []

Add (message: string) {

This.messages.push (message)

}

Clear () {

This.messages = []

}

}

@ Component ({

Selector: 'app-messages'

Template:--

Messages

Clear

{{message}}

--

})

Export class AppMessagesComponent implements OnInit {

Constructor (public messageService: MessageService) {}

NgOnInit () {

}

}

So what problems will be encountered in using Service for state management in Angular? there will be no problem if only a very simple state is managed directly through Service, but it will be difficult to deal with once the state stored in Service is inconsistent with the state that each component needs to display. For example, the following figure is a scenario we often encounter. First of all, there will be many custom views in the project. By default, only 2 views will be displayed, and the rest of the views will be in more views.

We can simply store all the view lists in ViewService, and the add and delete logic for the view is moved to ViewService with the pseudo code as follows, but there is a problem that the view data displayed by the navigation bar component and more view components is different, so you need to split the view list, the navigation bar only shows 2 views, and the rest is in more views.

Class ViewService {

Views: ViewInfo []

AddView (view: ViewInfo) {

/ / call API

This.views.push (view)

}

UpdateView (view: ViewInfo) {

}

RemoveView (view: ViewInfo) {

}

}

What should we do if we want to solve this problem at this time? I can think of two ways to solve it quickly.

The two views toolbarShowViews and more view moreViews of the navigation bar are stored separately in ViewService in addition to all the views. The disadvantage is that each time you add, delete or change the view, you need to recalculate the two arrays, and the state in the Service will increase. If one day the requirements change and all the views are displayed directly, you have to go back and modify the code in the ViewSevice, which is supposed to be the state of the navigation bar and more view components. Now it must be put together with the global view state, which can solve the problem, but it is not perfect.

A more disgusting way is to cycle through all views on the navigation bar component template. According to index, only the first two displays are taken, and more component templates cycle all views only to show the following views. The disadvantage of this approach is that the logical code is put into the view. If there are more complex scenarios, it may not be possible to do so through template expressions, and the second is to cycle some unneeded data that may cause performance loss in some scenarios. As for the views in the example, there are certainly no performance problems.

So is there a more elegant and better way in addition to the solution in the 2 above? The answer is Observable (objects that can be subscribed to). Of course, the Angular framework itself depends on RxJS, and the official API provided by HttpClient Router returns Observable objects.

Going back to this example, we can change the views in ViewService to a BehaviorSubject,BehaviorSubject object that can be subscribed and broadcast, and can also store the last data. After manipulating the data, we can broadcast it through views$.next (newViews), and then subscribe to the views$ stream in the navigation bar component to take only the first two views, and more view menu components to subscribe to the later views. If there are other components that display all views, you can subscribe to the view list stream viewService.views$ directly | async displays all views.

Thank you for your reading, the above is the content of "does Angular need state management?" after the study of this article, I believe you have a deeper understanding of the problem that Angular needs state management, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.