My perspective on React and Redux

Once upon a time everything in a web page would result in a page refresh. You submitted a form, your data would go to the server and the server was giving you back a UI response using some implementation of MVC pattern.

Then Single Page Apps became popular and since we only had MVC hammer and React was not born yet, all client side applications would look like nails.

Until it became clear that MVC that was good for page-refresh model on the server, is not good for SPAs and the problem of application state scattering over models and views imposes serious costs of maintaining large code bases and applying changes.

But why? When you have page refresh, you start with a clean state after each page refresh, but in SPAs, from the moment that you land on the page, the existing application state needs to be changed after every client interaction. Therefore, it suddenly becomes much more complicated and applying MVC results in a mess we all have seen in largeAngular 1 and Backbonejs (and other MVC framework) code bases.

Turned out we already had faced a similar problem in stateful server side applications and what was the solution? Workflow which is nothing but a state machine. It starts from an initial state and depending the action, goes to a different state. This pattern allowed us to centralize the state and neatly solve that problem.

But before React, we could not utilize this solution for SPAs. We needed a fast solution to render the UI at any given time from the state that our state machine gives us.

And then React came along and gave us this ability. How? As Staltz mentioned in this brilliant article:

The purpose of the Virtual DOM is to enable UI as a pure function of state

I love React. It started a revolution in web development similar to what iPhone started in phones interfaces.

There you go! We now can render the UI very efficiently if we have the state of the application at any given time. The only missing part to solve the problem? State machine implementation and that is exactly what Redux is.

So, even though it uses a different vocabulary, Redux in its core is a state machine. You can define Actions. Reducers give you the next state based on the current state and the given action and Store gives you the API to dispatch an action and get the state at any given time.

Conclusion

This is obviously not an introduction to React or Redux. I wrote this to illustrate that the core software principles and practices are very helpful to grasp new technologies and how we can resonate with them in the learning process. Also how evolution in technologies allow us to use similar solutions for solving problems in seemingly unrelated areas.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.