Why does React emphasize on unidirectional data flow and Flux architecture?

View other answers to this thread
Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more

Sandeep Panda's photo

Unidirectional data flow is a technique found in functional reactive programming. React doesn't encourage bi-directional binding to make sure you are following a clean data flow architecture. The major benefit of this approach is that data flows throughout your app in a single direction and you have better control over it (we'll see how). Also the application state is contained in specific stores and as a result different components of your app remain loosely coupled.

Two-way Binding Vs Unidirectional Data Flow

In two way data binding the view is updated when the state changes, and vice versa. For example, when you change a model in AngularJS the view automatically reflects the changes. Also an input field in the view can mutate your model. While this works for many apps, it can lead to cascading updates and changing one model may trigger more updates. In this case the data flow looks like following :

View <> State

As the state can be mutated by both controller and view, sometimes the data flow becomes unpredictable. Flux architecture shines here.

Flux takes a functional approach. The view is a function of the application state. As a result when the state changes the view automatically re-renders itself. In other words, the same state produces the same view which gives you better predictability.

Mutation of data is done via actions. So, new data always enters into the store through actions. View components subscribe to the stores and automatically re-render themselves using the new data. So, the data flow looks like this :

Action -> Store -> View

Flux Dispatcher

As you can see, the data flows in a single direction from parent to child making it much more predictable. As you have a single source of truth you can easily debug the app in case something goes wrong. This can be difficult is a large MVC app where the model can be mutated by any component.

Here are some links that may help you :