In the State Management In Angular using NGXS – Part 2  of this series I covered the basics concepts of NGSX using a simple example. In this post we’ll look at how NGXS can be used to deal with external systems such as a HTTP call to get a json payload.

The NGRX library uses the notion of Effects to deal with external systems calls from your Angular application. As quoted in the last post “NgRX Effects are a awesome approach to observable event streams but they can be painful to construct, read, maintain and teach to other devs”.

NGXS takes a similar approach to the manner in which React Redux deals with external system calls by placing them inline in the Action function.

Firstly we define an action.

Then we add an Action function named getPosts. In this example the function calls the json endpoint directly. In a production scenario you will want to have this code in a service class and inject that into the constructor of the state class.

Then we wire the state to the components and on initialization we dispatch the action FetchPosts.

Then we create the view

Hope you’ve enjoyed the final part of this series discussing NGXS.

The next time you are evaluating the tech stack for your next Angular project please have a look at https://ngxs.gitbook.io/ngxs for your state management functionality.

The final code for this part is here https://github.com/hsdgit/State.Of.Angular/tree/effects