Years pass, technologies evolve, but some development patterns stay strong, improving over time... This is the case with State Management!
Introduced with Flux, an architecture designed by Facebook for Facebook, State Management is now a must for Web development. This development paradigm is mainly characterized by a one-way data flow; instead of the bidirectional data binding used by MVW frameworks such as AngularJS, or more recently Vue. Flux is created to solve some mistakes of the MVVM (Model-View / View-Model) pattern, especially when scaling up Web applications. With the creation of the concept of "store", there is no more (or at least less) problem linked to different data sources. Everything is centralized in the same place. It's said that the store is single source of truth!
Just like callback functions, promises or streams, State Management is a "reactive" programming paradigm. The idea of such a development is that components using the store data, react when these same data are updated. For this, State Management respects several rules:
- The store is read-only
- The data are updated by a "dispatcher"
- The dispatcher is solicited by actions
- User interface triggers actions
According to Flux implementations, the notion of "dispatcher" is more or less explicit, however the data flow stay the same: actions are dispatched by the view that update the store data and implicitly update views associated to this data. In the Web development world, there are many distinct implementations of Flux: Fluxxor, MobX, Overmind, etc... Redux and Vuex are respectively the more known for React and Vue ecosystems.
Although these dependencies are extremely practical and greatly facilitate the developer work, it's possible to build your State Management architecture. This is what brings us to this post!
Below, we'll see how to code your own Redux / Vuex, step by step, using latest versions of React and Vue tools currently available (version 17 for the library of Facebook, and version 3 for the community framework).
NB: React uses hooks, and Vue uses the Composition API. These last features being very similar, it will be interesting to see how they interface themselves in this kind of development.
The implementation of a State Management (whether in React or in Vue) is divided into two parts:
- The Provider who initializes the store engine
- Consumers who interact with the store, reading /
The creation of a store with the Facebook library is achieved by a clever combination of hooks and the Context API. Creating a context gives access to the
<Provider /> component which will integrate the store data previously provided by the
useReducer() hook. Indeed, the "State - Reducer" development pattern plays an important role in the management of a complex state of a component.
These few lines are enough to set up a store engine. However, to spread data (from a context) to child components, these same components must be encapsulated by the parent component (
<StateProvider />), preferably at the highest level of the application.
For the community framework, with Vue's version 3, the store initialization is mainly based on the Composition API, as well as on the "Provide / Inject" development pattern. This last feature (already present in Vue 2) is very similar to React's Context API, and allows to extend global data to a whole part of the application.
Above (functions speaking for themselves) we quickly notice that we declare a reactive variable (the application global state), then we make it available, as well as functions allowing to mutate this variable. Then (and just like React), it isn't enough to inject the store data into child components to interact with this last one, it's also necessary to wrap these same components by the parent component (
<StateProvider /> again), responsible for the store.
NB: In the rest of this post, CSS classes that you'll find in the rendering of
<StateConsumer /> components come from an UI framework: Bulma!
Once the child component is encapsulated by the store owner component, we retrieve its data using the
inject() function with the Vue framework. The parameter of this function is simply a unique identifier, which refers to the variable / function previously provided by the parent component.
setup() option will transmit the store state, as well as functions to update it, to the child component
<StateConsumer /> before mounting it. In the template above, we use directly
state.fullName value of the store, and we update it when the
onchange event is triggered by the
<input>, or when the
onclick event is played by the
On the React library side, store's values (i.e. its state, and the
dispatch() function) are retrieved through another hook:
useContext(). By importing the store context, and passing it as a parameter of this function, a "stateless" component "connect" (refers to Redux) to the application store.
We still have to update the store... To do this, simply dispatch an action. By convention, an action is an object with two properties:
- The "type" used as a reference for the dispatcher
- The "payload" used by the store to update its state
The introduction of hooks with React 16.8 and the appearance of Vue 3's Composition API are changing the way we use the store. Already present since version 7.1.0 of the "React-Redux" dependency, hooks (
useDispatch()) greatly facilitate the "connection" with the store, and avoid a HOC (High Order Component) process, to pass some data from a parent component to properties of a child component. Vue's Composition API can be used very similar to React hooks.
This way of doing things is more and more widespread in Web developments, and responds to the following principle: split to rule better; Perfect for applications with more than 100 components...
NB: Conventionally, the name of this kind of function should start with "use" to specify that it's a composition function / custom hook.
This concept is rather intelligent, and allows us to think about our applications more finely, brick by brick. This promotes the code reusability for components having the same logic: the same way of reading the store and / or updating all or part of the store.
NB: The advantage of the above function is that it directly handles the default value of the "field" if its value isn't (yet) present in the store; instead of handling it in the component template.
I've been using State Management for several years now, often with Redux (in parallel with Vuex), I've learned to know how it works and its many benefits.
While extremely practical, State Management makes sense in a scale Web application, with a multitude of components, as well as multiple features. This makes it easier to centralize, read and update data.
You'll understand, I'm quite a fan of reactive programming through the store usage. If you develop regularly with Redux (or Vuex), or even other libraries (RxJS), I invite you to do this exercise of creating a State Management from scratch (for code's sake 😎).
Finally, this comparison between React and Vue, makes it possible to realize that these two frameworks revolving around a Virtual DOM aren't so far from each other, despite their own concepts (such as Vue's "Provide / Inject" pair). After this post, I think I reiterated this work on other tools, probably Svelte whose some concepts are quite close to React and Vue. That will likely result in a spin-off post...
About this post, I made two demonstration projects (visually identical) by applying the architecture explained above. Here are links: