The Tale of Unidirectional Dataflow in Angular
Why things no longer automatically flow both ways
Aphinya Dechalert
When it comes to Angular, the framework has its perks and quirks. While React implements a unidirectional dataflow pattern by default, Angular didn’t exactly go down this route from the get-go.
Unidirectional dataflow is a conceptual pattern that is used by many frameworks and libraries on the front end — recently popularized by the rise of Redux patterns over the past few years.
But what exactly is unidirectional dataflow, what’s it got to do with immutability, and why is it awesome 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.
