The Tale of Unidirectional Dataflow in Angular
The Lowdown on Unidirectional Dataflow

Unidirectional dataflow is not a word we often see, nor is it something that organically comes up in conversations. However, it’s a neat little data management pattern that can simplify how your application responds to change.

For most apps, everything eventually boils down to data. The flow of data between the different layers, such as views, components, and services, can determine the effectiveness of an application’s modularity as it grows.

So what exactly is unidirectional dataflow?

Unidirectional dataflow is a programming pattern that deals with how data is updated. There are two main patterns currently in use — unidirectional and bidirectional. The uni part of unidirectional refers to the idea that data can only flow in one direction.

For the front end, once a view has been rendered, an action is required to change the data and re-render the entire or portion of a view from scratch.

React does this by default and there is no explicit binding available to allow the view to update without direct action from the layers beneath it.

Updates happen in one direction and one direction only. The data is not expected to change and is therefore considered immutable. When something happens and a change occurs, that state no longer exists and it is considered a new entity entirely by the view.

Change is caused by an external action. When this happens, the view is wiped clean and re-rendered with the new data. This is unidirectional in a nutshell: a one way dataflow where data can only move in one direction and cannot backtrace in the direction it just came from.

With unidirectional dataflow, there’s no need to track states because a change in data will result in a complete change in the view.

Hypothetical unidirectional dataflow

To understand this in an Angular context, we need to travel back in time — way back to the original iteration of Angular.js
['Aphinya Dechalert']
['Angular', 'Web Development', 'Software Development', 'Technology', 'Education']