This content originally appeared on DEV Community and was authored by Nicholas Mendez
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 be updated in response to UI interactions.
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:
The following are libraries that assist with it:
Redux
Redux describes itself as a 'state container' (its also caled a flux library) and implements the following architecture.
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
As the it's website says ReactiveX combines functional programming and the Observer & Iterator design patterns. The library has various versions for different programming languages and frameworks such as ngrx for angular.
ReactiveX is about setting up streams which produce events that components can subscribe and react to.
If you like the aspects of functional programming such as immutability, purity and traceability (while debugging), you might enjoy working with reactivex.
React Context
In the earlier days, react and redux was a popular combination. Nowadays you can get away with using react context. 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.
Context can make working with large react apps simpler without adding any dependencies.
Vuex
Vuex is state management library for Vue.js applications. The following is how vuex apps are structured.
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 describes itself as simple, scalable state management. It organizes apps as follows.
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 to code so that it is organized, predictable and extendable.
This is related to a larger software engineering concept called Design Patterns. You can implement your own state management system by applying the fundamental patterns like the Observable.
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
- Redux
- Who Needs State Management
- State Management Battle in React
- To JS MVC Frameworks
- What is React Context
- MVC vs Flux vs Redux
- Redux vs Mobx
This content originally appeared on DEV Community and was authored by Nicholas Mendez
Nicholas Mendez | Sciencx (2021-06-12T14:54:05+00:00) The Frontend Hitchhikers Guide: State Management. Retrieved from https://www.scien.cx/2021/06/12/the-frontend-hitchhikers-guide-state-management/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.