Getting Started with the NGRX

 

If you have worked with the Angular, at sometimes you might have heard the the term NgRx which is angular app State management system.But if you haven't heard of that, you might be wondering what is this state management . So in simple terms it is single place where all the data is stored and is transmitted to the whole app, without manually emitting data through subjects.

    At first this seems to be a difficult task as most of us start using and making angular app using services, if your app is small then you might feel not to go with ngRx but as the app grows the data management gets difficult with the services alone so you need to have some centralized store to edit or retrieve the data.

    For Angular there is a great state management library called Ngrx which we will be discussing in this as already mentioned in above  paras. The main components that make up the ngRx store are:

1. Reducers
2. Actions
3. Effects

Now if we get into details for each, reducers are the functions which based upon the action and state return the new state. action for the reducers are defined in Actions file of the app. After installing the ngrx in the angular project , you need to setup the import for the StoreModule which takes a java Script Object as a input for forRoot() function which is the reducer function.

    We will discuss about setting up all the things later in some other blog. Lets now know about the effects part, in this actually async code is handled and executed which cannot be done in reducer, even if we try to do so in reducer it will give us error.