Jump to NGRX
before start i need to say about component interaction in angular. as we all know angular is component hierarchy based ui we can build. in that we need to communicate/ transfer data among components as we desired.
Component Interaction:
The Components are useless if they do not share data between them. There are two type of data passing. I passing data to child component 2 passing data to parent component
The Parent Component communicates with the child component using the @Input Annotation.
The @Input Decorator is used to configure the input properties of the component. When you mark a property as input property, then the Angular injects values into the component property using Property Binding.
The Child Component exposes an EventEmitter Property. This Property is adorned with the @Output decorator. When Child Component needs to communicate with the parent it raises the event. The Parent Component listens to that event and reacts to it.
For small to medium apps, this is an okay approach, but it is cumbersome with large applications,
Assume that we have thousand of components in our applications. Its really hard to maintain and develop the code.
Solution is there’s need to make centralized state managing mechanism and enhance with the application.in the current example diagram shows how it works. When it need to communicate the data between two components the both components are connected to the root state or we call store in application so via the store we can pass the data between components.
What is NGRX:
ngrx is a set of RxJS-powered state management libraries for Angular, inspired by Redux, a popular and predictable state management container for JavaScript apps. It was developed by Rob Wormald, an Angular Developer Advocate in 2013
What is RXJS:
RxJS is a JavaScript library for reactive programming that allows you to work with asynchronous or callback-based data streams.
Talking about streams – a stream is a sequence of values in time. This streams of events and data in real-time – which we call Observables – are a beautiful way to handle asynchronous code.
Using RxJS, we would write something like this:
You see, with RxJS we can achieve so much with very little code.
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
.subscribe(() => console.log('Clicked!'));
var arr = Rx.Observable.of(90, 80)
.subscribe((v) => console.log('Value:', v));
Lets Take a Look REDUX
Redux, as stated earlier, is a state management library for JavaScript apps. Although it was initially developed for the React community, it can also be used in vanilla JavaScript or with any other JavaScript framework.
Redux is a library that implements the ideas of Flux. Flux is a design pattern that made popular one-way data flow (unidirectional flow), which was first presented by Facebook
States of an app in Redux are kept in the store. The states are updated using actions transported to pure functions called reducers. Reducers take in state and action as parameters and performs an immutable action on the state and returns a new state.
Store:
To put simply, store is the “database” of our application. It comprises of different states defined in our application. The state, thus, is immutable and only altered by actions.
The store combines the whole application state into a single entity, acting as a database for the web application. Like a traditional database it represents the point of record for an application, your store can be thought of as a client side “single source of truth”.
Reducer:
If the store is the database of the application, the reducers are the tables. A reducer is a pure function that accepts two parameters – an action and the previous state with a type and optional data associated with the event
Action:
Store encompasses the state of our application and reducers get the state slices or sections of the store, but how do we update the store when the need arises? That is the role of the actions. Actions represent payloads of information that are dispatched to the store from the application and are usually triggered by user interaction.