Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the crucial difference between Angular 2 Data Flow and Flux?

Hi I am studying Angular 2 and React + Redux right now, and I have a question on the difference of the difference in data flow of those two choices.

  1. Angular 2 uses uni-directional data flow by default. Redux is a Flux implementation, which (also) uses uni-directional data flow. What is the crucial difference among those? (is it maybe, the composition of parts?)
  2. If those two are not so much different in terms of how data flows, why would anyone use Flux or Redux over default choice of Angular 2 framework?
  3. If those two are quite different, is there a name I can call for Angular 2's data flow for further references to compare those two?

Thanks a lot in advance !

like image 655
sangyongjung Avatar asked Mar 13 '17 14:03

sangyongjung


People also ask

What is angular Flux?

flux-angular makes it easy to implement a performant, scalable, and clean flux application architecture in an angular application. It does this by providing access to a new angular. store method for holding immutable application state using Baobab.

What is the data flow of flux?

Flux eschews MVC in favor of a unidirectional data flow. When a user interacts with a React view, the view propagates an action through a central dispatcher, to the various stores that hold the application's data and business logic, which updates all of the views that are affected.

Why is unidirectional data flow important?

If the process is not followed correctly while rendering the data into the DOM, it leads to major issues like performance overhead and so on. This is why we need a unidirectional data flow mechanism, which ensures that the data is moving from top to bottom and that changes are propagated through the system.

What is meaning of unidirectional data flow?

Unidirectional data flow describes a one-way data flow where the data can move in only one pathway when being transferred between different parts of the program. React, a Javascript library, uses unidirectional data flow. The data from the parent is known as props.


2 Answers

By using Redux with angular 2, you are centralizing your application state in a single place totally seperate from your components: the store.

Your components can then be stateless, allowing you to disable internal change detection on them like this.

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
class myComponent {
  @Input() inputFromTheStore: Observable<State>;
}

Indeed the above example is a stateless component, on wich you plug in a stream of state.

Also to answer your question :

Angular 2 uses uni-directional data flow by default. Redux is a Flux implementation, which (also) uses uni-directional data flow. What is the crucial difference among those? (is it maybe, the composition of parts?)

The crucial difference is that with Redux the state will always be coming in from above via @Input(). Unlike traditional angular2 statefull components where state could transit through @Input() and @Output().

like image 37
Lev Avatar answered Oct 12 '22 08:10

Lev


If those two are not so much different in terms of how data flows, why would anyone use Flux or Redux over default choice of Angular 2 framework?

Angular mostly provides UI layer (components) while the state management is not predefined by the framework. Since angular has services, you can keep the business logic in services (stateful services) and UI state in components (stateful components), but it means that there is no single place for the state as it is distributed among services/components.

The main reason to use redux in angular application is to separate UI layer from the data layer. In redux, the state is separated into a separate layer (think single tree-like object) which gets synchronized with UI layer (components) through special services injected into components constructor (check this setup).

If those two are quite different, is there a name I can call for Angular 2's data flow for further references to compare those two?

I haven't come across one, probably because as I mentioned above angular as a framework is focused on presentation, not state.

like image 125
Max Koretskyi Avatar answered Oct 12 '22 07:10

Max Koretskyi