Angular State Management without using external libraries

Published by Rienz on

Angular State Management is important when it comes to web applications or web tools but some external libraries in Angular like ngrx, ngxs and akita are very complicated and complex on how to implement it.

Now I would share something called BehaviorSubject in rxjs which is already included on Angular and can be used as a tool to manage our state. You can also go to this github repo to double check if your doing it correctly and know the structure of this article.

 

 

What is Subject?

We need to know first what is Subject. Basically it is an Observable in which you can store a value and emits the value upon using the next function.

 

 

What is BehaviorSubject?

BehaviorSubject is a type of the Subject but requires an initial value and emits its latest or current value upon subscription. This is important for our Angular State Management since we could get the latest value of our data and update it whenever some changes happens.

 

 

Creating Model and Service

Before we proceed on creating our Store class. I want to share the full potential of this topic so first lets create a Model which represents our state and Service that we can use later from our store which calls an HTTP request from an API.

Checking on the routes that are available in jsonplaceholder. I picked the post endpoint for us to use in our project.

Nothing crazy here just some HTTP functions in our service that we will be using in our store later.

 

 

Creating Store

Now that we know how BehaviorSubject works. Lets proceed on creating our Store class.

Let me explain one by one on what did we do here.

  • First we declare our state$ as BehaviorSubject and assign with an initial value of undefined just to visualize that no value has been stored yet.
  • Next is the getAll function which returns the current value of the store and getAll$ that returns an Observable on which we can subscribe so that our data will be updated when some changes happens in our state.
  • Lastly is the store function where we update the data on our state.

 

 

Extending Store

Here’s the fun part where we’re going to inject the Service and extend the Store. So now we’re going to extend our Store class to our PostsStore.

Then provide an initialization init function to get the data from the service and then use the store function to save the response data.

 

 

Import in Module

Don’t forget to put the store and service inside the providers of the module. also add the HttpClientModule into imports since we use HttpClient in Service.

 

 

Display in Component

You can run the init function wherever you like, for example in route resolver, components, and etc. But in this example I’m just going to run it on the App Component just to show on how it works.

app component image

 

We used an async pipe since our returned value is an observable but you can do it on the other way around where your going to subscribe to the observable then assign the returned value to your variable like the example below.

 

I would still prefer using async pipe as much as possible since it automatically unsubscribe the observable when the component is destroyed or not active but you can also manually unsubscribe the subscription however with extra codes.

 

 

Example Basic CRUD

 

So yeah! This is the end about Angular State Management and how to make yourself a store without using any external libraries. If you have any questions or suggestions feel free to comment here and I will try to reply as soon as I can.


2 Comments

Guilherme · February 7, 2019 at 2:01 am

Really good article! I just didn’t understand the reason of calling “subscribe()” after the pipe in the store. Could you please explain to me?

    Rienz · February 7, 2019 at 8:55 am

    It is called for us to execute the observable to initialize the data and be stored when completed.

Leave a Reply

%d bloggers like this: