The Frontend Hitchhiker's Guide: State Management
Tags: hitchhikers, javascript, webdev, codenewbie
Published: 2021-06-12 14:54:05

# Introduction

Have you ever needed to build a large SPA with react or vue? How do you keep the code base manageable? 

Imagine you are building the following app where components share data and are updated in response to UI interactions.

![To Do](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l00gg4kbkbsrds2d4swa.gif)

The data on the interface is often referred to as state, it exists in memory and must be synced to the database. 

Handling how that data is synced, shared and updated is what state management is about. You often hear the following terms associated with this concept:

* [Reactive Programming](https://g.co/kgs/aoSZbv)
* [Data Binding](https://en.wikipedia.org/wiki/Data_binding)
* [Model View Controller](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)
* [Observables](https://medium.com/@davidjtomczyk/introduction-to-observable-85a5122bf260)

The following are libraries that assist with it:

1. [Redux](#redux)
2. [ReactiveX](#bootstrap)
3. [React Context](#react-context)
4. [Vuex](#vuex)
5. [Mobx](#mobx)
6. [Do It Yourself](#do-it-yourself)

# Redux

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tkv2gebmj86pfwy1465.png)

[Redux](https://redux.js.org/) describes itself as a 'state container' (also called a [flux](https://medium.com/@alexishevia/the-simplest-flux-implementation-a8518ecae1e0) library) and implements the following architecture.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqf3ye5dilp54yjo7aue.png)
 
The view is the user interface which allows the users to perform actions. Each action calls a type of function called a reducer which affects the application state that is saved in the store. The store then updates the UI.

Outside of the big frameworks, redux was the first library dedicated to state management to appear on my radar. Redux can be used with other frameworks or UI libraries.

# ReactiveX

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryuijuvoeex41h0gofb3.png)
 
As the it's website says [ReactiveX](http://reactivex.io/) combines [functional programming](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0) and the [Observer](https://en.wikipedia.org/wiki/Observer_pattern) & [Iterator](https://en.wikipedia.org/wiki/Iterator_pattern) design patterns. The library has various versions for different programming languages and frameworks such as [ngrx](https://ngrx.io/) for angular.

ReactiveX is about setting up streams which produce events that components can subscribe and react to.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24r7uq7dv8d8yov6p86o.png)

If you like the aspects of functional programming such as immutability, purity and traceability (while debugging), you might enjoy working with reactivex.
 
# React Context

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9eh9oj872cj6i7a3zm3z.png) 

In the earlier days, react and redux was a popular combination. Nowadays you can get away with using [react context](https://reactjs.org/docs/context.html). Context allows components to share values without needing to pass props.

React apps are a tree of components with with the App component as the root. Context provides a singleton which is accessible by any component.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbxsm29vswra6si2vr11.png)
 
Context can make working with large react apps simpler without adding any dependencies. 

# Vuex

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ks6w91te41kw2x0fd2jt.png)

[Vuex](https://vuex.vuejs.org/) is state management library for Vue.js applications. The following is how vuex apps are structured.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in0wm3jfu9ksyxuwx3cv.png)

This is definitely wroth a look for medium to large vue apps. The vuex page has the following quote which I think rings true.

> Flux libraries are like glasses: you’ll know when you need them.
 
# Mobx
[Mobx](https://mobx.js.org/README.html) describes itself as simple, scalable state management. It organizes apps as follows.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aebbxvj8fukf6qiat2o4.png)
 
The simpler structure of Mobx makes it easier to pickup over redux however, it sacrifices some scalability. Mobx can be used with UI libraries such as react or Vue. 

# Doing It Yourself
State management implementations typically apply an [interactive architectural pattern](https://lostechies.com/derekgreer/2007/08/25/interactive-application-architecture/) to code so that it is organized, predictable and extendable. 

This is related to a larger software engineering concept called [Design Patterns](https://dev.to/twinfred/design-patterns-in-javascript-1l2l). You can implement [your own state management system](https://blog.jeremylikness.com/blog/client-side-javascript-databinding-without-a-framework/) by applying the fundamental patterns like the [Observable](https://www.dofactory.com/javascript/design-patterns/observer). 


# Conclusion

While it may take some time to pick up the coding style of a particular state management strategy, they tend pay off in the long term for extending large apps. This concludes stop number 3, see ya next week for next destination. Can you guess where we are going next? Place your guess in the comments.

# Related Reading

* [State Management Collection](https://github.com/collections/javascript-state-management)
* [Redux](https://redux.js.org/)
* [Who Needs State Management](https://medium.com/@vyaron/who-needs-state-management-anyways-55e6d1c74239)
* [State Management Battle in React](https://dev.to/workshub/state-management-battle-in-react-2021-hooks-redux-and-recoil-2am0)
* [To JS MVC Frameworks](https://www.infoq.com/research/top-javascript-mvc-frameworks/)
* [What is React Context](https://dev.to/pagepro_agency/what-is-react-context-and-how-to-use-it-2gp7)
* [MVC vs Flux vs Redux](https://www.clariontech.com/blog/mvc-vs-flux-vs-redux-the-real-differences)
* [Redux vs Mobx](https://blog.logrocket.com/redux-vs-mobx/)