The Evolution of State Management: Redux and Beyond

State management is a crucial aspect of web application development, referring to how data is stored, accessed, and modified within an application.

Early Days of State Management (pre-2010)

In the early days of web development, state management was relatively simple:

• DOM Storage: developers often stored state directly in the Document Object Model (DOM). For example, using data attributes:

<div id="user-info" data-user-id="123" data-username="codigotipado"></div>

• Global Variables: another common approach was using global JavaScript variables:

var currentUser = { id: 123, username: "codigotipado" };

These methods worked for simpler websites but quickly became unwieldy as applications grew more complex. Issues included:

• Difficulty in tracking where and when state changes occurred

• Increased risk of bugs due to unintended side effects

• Poor scalability as applications grew larger

The Rise of Single-Page Applications (SPAs) (2010-2013)

The advent of sophisticated JavaScript frameworks like AngularJS (2010) and Backbone.js (2010) led to the rise of Single-Page Applications. SPAs brought new challenges:

• More complex client-side logic

• Need to manage state across multiple views

• Increased amount of data stored in the browser

Frameworks like AngularJS introduced their own state management solutions. For example, AngularJS used a concept called $scope to manage state within components:

angular.module('myApp', [])
  .controller('UserController', ['$scope', function($scope) {
    $scope.user = {
      name: 'Código Tipado',
      url: 'https://codigotipado.com'
    };
}]);

While these solutions worked, they often led to issues with state predictability and made it difficult to understand how data flowed through an application.

The React Ecosystem 2014-2015

To understand the genesis of Redux, we need to look at the state of the React ecosystem in 2014-2015. React, created by Facebook, was gaining traction as a powerful library for building user interfaces. However, it was intentionally minimalist in its approach. As Andrew Clark explains:

"There's a lot that just isn't included in React, like React alone is not sufficient to build an entire full-featured application. That's intentional but in contrast to something like Vue or Angular, especially at the time, React is missing things that you would need to build an app."

Specifically, React lacked built-in solutions for:

1. Routing

2. State management

3. Data fetching

This intentional minimalism was part of React's philosophy. This approach led to a period of rapid innovation in the React community. Developers rushed to create libraries that would fill these gaps, leading to a diverse ecosystem of tools and solutions.

One of the key areas where developers sought solutions was in state management. Facebook had developed an internal pattern called Flux to address this need. Andrew Clark describes the situation:

"Flux was this pattern that Facebook had developed internally. And they published a library but really what they published was like a description of this pattern for how Facebook Engineers were doing Global State Management in their applications."

However, Facebook didn't provide an official implementation of Flux. This led to a proliferation of libraries attempting to implement the Flux pattern. As Clark recalls:

"So all these libraries started springing up saying here's an implementation of that pattern, you should use it in your framework and I had one of those. It was called, it's a very silly name, it was called Flummox."

This period of experimentation and competition among Flux implementations set the stage for the eventual creation of Redux.

Dan Abramov, now well-known in the React community, was working on an innovative idea for a conference talk. Clark describes Abramov's concept:

"Dan was working on this... essentially an idea for a conference talk that he eventually gave that was very influential at React Europe 2015 for this idea of a flux framework that could be used with time travel debugging."

Time travel debugging was a revolutionary concept that allowed developers to rewind and replay user interactions for easier debugging. As Clark explains:

"It's a really, really cool demo, nowadays things like Replay live in that space, a really cool idea."

To support this concept, Abramov created a prototype of a new Flux implementation called Redux.

The Collaboration Begins

Abramov and Clark's paths crossed when Abramov reached out about using Clark's Flux implementation, Flummox. This initial contact led to a collaboration that would result in Redux. Clark recounts:

"That's how I originally met Dan as he messaged me and he was using it in one of his projects and so that's how we kind of got to know each other."

As Abramov developed his ideas for Redux, he shared them with Clark:

"So I think he sent me a few messages, he had published an original, an initial prototype, proof of concept, called Redux and he messaged me about it and I looked at it and it was pretty cool."

The Birth of the "Reducer"

One of Clark's key contributions to Redux was the concept of a "reducer". This was a novel approach to state management that would become central to Redux's architecture. Clark recalls:

"I can't honestly remember, I think my initial contribution to kind of I guess Redux 1.0 was the idea of a reducer. I'm pretty sure we just made that term up, this idea of like a single function that would map all of your state to it was very kind of I don't know, I've mixed feelings about in retrospect, like the impact Redux had in the industry but it was a very kind of high-flying functional programming influenced idea of what if you modelled all your state as a single stateless function."

This concept of modeling all application state through a single function was influenced by functional programming principles and would prove to be both powerful and, at times, controversial.

Redux Takes Off

The collaboration between Clark and Abramov led to the official release of Redux. Its impact was immediate and far-reaching. Clark describes the effect:

"The effect of Redux was I mean there was a technical impact but I think the biggest one was social because for whatever reason all these other frameworks, when people were comparing Redux to all these other frameworks, which all essentially did some version of the exact same thing.. People just started converging on Redux as being like the de facto default Flux framework."

Redux quickly became the go-to solution for state management in React applications. Its popularity had a unifying effect on the React ecosystem:

"Everyone was able to converge on this one this one State Management library and this ecosystem of additional like plugins and extensions for Redux sprung about. And I think it was quite useful and at that time in React's growth because it removed this giant question mark for developers when they were considering React."

Redux's Impact on Developer Careers

The widespread adoption of Redux had a significant impact on the job market for React developers. As Clark notes:

"To this day when I see resumes for web developers it's like React and Redux, they're like.. maybe a little bit less in the last few years but it's always like those two things always show up on people's list of skills or lists of experiences. They just went together kind of almost synonymous, they're not synonymous but they were entangled for a while."

This close association between React and Redux meant that for many developers, learning Redux became an essential part of their React journey.

Maintenance and Evolution

After the initial creation and rise of Redux, Clark and Abramov eventually handed over maintenance to other developers:

"Dan and I actually didn't maintain it for that long, eventually we gave it over to some other maintainers who have shepherded the project to where it is today. They've made a lot of nice improvements and done a really good job like documenting different patterns and shepherding the community."

The new maintainers continued to evolve Redux, improving its API, performance, and developer experience. They also focused on creating comprehensive documentation and best practices, which helped cement Redux's place in the React ecosystem.

Reflections and New Directions

As time passed, both Clark and Abramov began to reconsider some aspects of Redux, particularly in light of new developments in React and state management patterns. Clark reflects:

"Dan and I though we haven't disavowed it but I think we've moved on to this place where a lot of the stuff that people are using Redux for we think there are better ways to do it."

One area where they saw room for improvement was in data fetching and caching:

"One thing that people used Redux a lot for was just fetching data from the server and storing it in some local cache and that's something where I don't think that Redux in the Flux framework is the best way. There's just a lot of flaws with that pattern."

This realization led Clark, Abramov, and others on the React team to explore new solutions:

"A lot of the work that Dan and I have done on the team with with Sebastian Markbåge and with the others for the last five-six years is find ways to make that better and that particular need better in React. Taking influence from other projects like Relay which was also developed at Facebook and yeah we're still working on that."

Redux's Lasting Influence

Despite the shift towards new patterns and solutions, Redux's influence on React and the broader JavaScript ecosystem remains significant. One concrete example is the useReducer hook in React:

"There's this API called useReducer, which is. There would be no useReducer if there were no Redux. We might still have that API but I'm not sure that would even exist if we hadn't popularized the notion of a Reducer in Redux and that word also is one that we coined."

This shows how concepts introduced by Redux have been integrated into React itself, influencing the way developers think about state management even when not using Redux directly.

Flux Architecture (2014)

In May 2014, Facebook introduced the Flux architecture (it was not a framework) to address the scalability issues they were facing with their notification system. Flux introduced several key concepts:

• Unidirectional data flow: data in a Flux application flows in a single direction.

• Actions: plain JavaScript objects describing what happened in the app.

• Dispatcher: a central hub that manages all data flow in a Flux application.

• Stores: containers for application state and logic.

Here's a simple example of how data might flow in a Flux application:

// Action
function updateUser(userId, updates) {
  return {
    type: 'UPDATE_USER',
    userId: userId,
    updates: updates
  };
}

// Dispatcher
var Dispatcher = require('flux').Dispatcher;
var AppDispatcher = new Dispatcher();

// Store
var UserStore = {
  users: {},
  updateUser: function(userId, updates) {
    this.users[userId] = {...this.users[userId], ...updates};
  }
};

AppDispatcher.register(function(action) {
  switch(action.type) {
    case 'UPDATE_USER':
      UserStore.updateUser(action.userId, action.updates);
      UserStore.emitChange();
      break;
  }
});

Flux provided a more structured approach to state management, but its implementation could be complex, especially for smaller applications. Note that the reducer function wasn’t implemented in Flux.

Enter Redux (2015)

Redux, created by Dan Abramov and Andrew Clark, was introduced in June 2015. It was inspired by Flux and Elm, simplifying the concepts while maintaining the benefits. Redux is based on three core principles:

1. Single source of truth: the entire state of the application is stored in a single JavaScript object.

2. State is read-only: the only way to change state is to emit an action.

3. Changes are made with pure functions: reducers are pure functions that take the previous state and an action, and return the next state.

Here's a simple Redux example:

import { createSlice, configureStore } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

// Can still subscribe to the store
store.subscribe(() => console.log(store.getState()))

// Still pass action objects to `dispatch`, but they're created for us
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}

Redux quickly gained popularity, especially in the React ecosystem, due to its simplicity and predictability.

Redux's Impact (2015-2018)

Redux's impact on the JavaScript ecosystem was significant:

• It became the de facto state management solution for React applications.

• Its principles influenced other libraries and frameworks.

• It spawned an ecosystem of middleware and developer tools.

For example, the Redux DevTools Extension, released in 2015, allowed developers to inspect every state and action payload, and even "time travel" through the state history.

Beyond Redux (2018-Present)

While Redux remains popular, the landscape of state management has continued to evolve:

• MobX (first released in 2015, gained popularity around 2017): offers a more object-oriented approach to state management.

• React Context API (2018): provided a built-in way to pass data through the component tree without prop-drilling.

• React Hooks (2019): introduced useState and useReducer, allowing for simpler state management in functional components.

• Recoil (2020): facebook's experimental state management library designed for React apps.

• Zustand (2019): a small, fast state-management solution using simplified flux principles.

Current State and Future Trends (2021-Present)

The current trend in state management is towards simplicity and flexibility:

• Server-side state management: libraries like React Query (2019) and SWR (2019) focus on managing server state.

• Atomic state management: libraries like Jotai (2020) and Recoil allow for fine-grained reactivity.

• Framework-specific solutions: Next.js introduced its built-in state management solution with Next.js 13 (2022).

As web applications continue to evolve, state management solutions are likely to focus more on:

• Performance optimization

• Developer experience

• Integration with server-side rendering and static site generation

• Handling of both client and server state

The history of state management in web development reflects the increasing complexity of web applications and the ongoing efforts to make development more predictable, maintainable, and efficient.

Conclusion

The story of Redux is a testament to the power of open-source collaboration and community-driven innovation. From its humble beginnings as a conference demo to becoming a cornerstone of React development, Redux has left an indelible mark on the JavaScript ecosystem.

As Clark concludes:

"Redux it was a cool experience.. um uh I'm trying to be diplomatic here because it's not that I want to kill the project but I'm happy that we're finding ways to like slowly replace the need for it with better solutions."

This sentiment encapsulates the ever-evolving nature of software development. While Redux solved critical problems and shaped the way we think about state management, the community continues to innovate and find new, potentially better solutions.

The legacy of Redux serves as both a celebration of what has been achieved and a springboard for future innovations in state management and beyond.

Thanks for reading so far 🙏

I’d like to have your feedback so please leave a comment, clap or follow. 👏

Spread the Angular love! 💜

If you really liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don't forget to follow me and stay updated: 📱

• 🔗 LinkedIn

• 📝 Medium

• 🎥 YouTube

• 🐦 Twitter

Thanks for being part of this Angular journey! 👋😁