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.
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:
What is RXJS:
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 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.
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”.
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
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.