Managing state in Angular, Which one is better: RxJS or NgRx Store

While building a large-scale application, state management helps to modularize applications, making code more feasible and readable. There are multiple libraries in angular for state management like NgRx, Akita, or NgXs. Still, RxJs provides simple state management techniques using RxJs.

RxJs Observables

• Observables are the core of RxJs which helps in implementing state management in simpler Angular Applications
• Using observables it is easy to inform components about the updated states
• Components can easily subscribe to the last state that the observable holds
• Observables emit a new value each time it is subscribed by the component
  

Let's have a look at the RxJS-based state management techniques, which are as below

• Subject
• BehaviorSubject

Subject

• Here first we are assigning value “1” to mySubject using mySubject.next(1). That will call both the subscribers and print consoles a and b.
• Then we updated the value to be emitted to “2” using mySubject.next(2). That will again call both the subscribers and print consoles a and b.
• Then we emitted one more value “3” to all the subscribers using the same mySubject.next(3). Which will again call all three subscribers and print consoles a, b and c

BehaviorSubject

• In the above example, we have a behaviorSubject with two subscribers and we are assigning three values to them.
• Irrespective of the time when they are subscribed each subscriber gets the latest value of the behaviorSubject.
• The output will look like this
  

Here is the basic difference between the both of them.

BehaviorSubject vs Subject

The major difference between BehaviorSubject and Subject is that the former holds an initial value that can be subscribed to immediately whereas the latter does not. Let's have a look at the programmatic difference between both of them

What is NgRx Store?

It is basically Redux inspired state management technique for angular applications. Have a look at the below diagram which explains the detailed flow.

State Management using NgRx store is basically a combination of the below techniques:

• Store: The application’s latest state is maintained in the store and it is immutable
• Selectors: Selectors help the components to get updates from the store
• Reducers: Reducers are responsible for handling the transition from one state to another
• Actions: Actions update the state of the store with the help of reducers
• Effects:  Effects are the results of Actions. They are helpful to listen to particular action types and execute as soon as the action happens
  

Use NgRx store in Angular

Creating a store:

• As the first step, you need to create a model of the book which will look like below. The file can be named book.model.ts

• Then we will create one excel file to define the actions of the store. The file can be named book.actions.ts. The actions files will be under the Actions folder.

• In the above example, we have defined one enum for the action constant.
• Then we implemented the AddBookAction method using the NgRx Action class, which accepts two parameters: a type and an optional payload.
• Now its time to create a reducer that will help with state transitions, so inside the reducers folder we can create series.reducer.ts file:

• In the above reducer, we have created an initial state for the Book interface and a reducer function named BookReducer Which accepts a state and an action as input parameters.
• If the action type is ADD_ITEM, it will return the state and the payload. Otherwise, it will only return the state.
• For the last step, we need to create one model which will help to store the state of the whole application in a single space
• That main state model will be named state.model.ts

Registering store: The next step will be registering the store in the module file which will be the main app.module.ts file

Using NgRx Store: After registration, you will be able to access the store in the app component as below

• The above code shows the app.component.ts file of our example.
• There, we have set book$ to a type of observable and subscribed to the store to get the books.
• The addBook() function is responsible for dispatching new books to the store.
  

Conclusion

This article concludes that state management techniques should be decided based on the requirements and the scale of the application. For larger and more complex applications NgRx store is more suitable because it helps to provide a single store for global applications wide state whereas RxJS observables and services are for smaller tasks and applications managing local level states.

Blog ref:

https://dev.to/angular/simple-yet-powerful-state-management-in-angular-with-rxjs-4f8g

https://dev.to/revanth_oleti/difference-between-subject-and-behaviorsubject-9g6

https://www.syncfusion.com/blogs/post/angular-state-management-with-ngrx.aspx