I’ve been developing Angular 4 applications for some time now. For state management — Services and components —I make do with these. But as the application grows in size and complexity — State management becomes lot harder. So It’s time to look elsewhere for answers.

Meet NgRx -The Redux inspired State management library for Angular. It uses RxJs and Reactive programming style to provide more robust development experience.

Their core idea is simple —

We can’t mutate the application state. State is immutable.

State mutation can only be done by dispatching Actions.

Only pure Reducer functions are capable of changing Application State.

In case you’re not familiar with “Pure Functions” — They are the kind of functions that will always return the same values for the same arguments. So If we adopt a functional programming style — We get more preciseness and control over our Application State. Debugging becomes much more friendlier. By restricting the ways the state can be changed — We reduce the chances bugs can appear.

We are going to create a very basic Todo App to demonstrate the basic structure of an NgRx app. I am going to use the API backend that I made in the MEAN App tutorial (Part 1). For the Angular side — We will be converting the Todo App of this tutorial — MEAN App tutorial(Part 2) into a NgRx version.