My journey from Redux to VueX
After years of staying faithful to React, the framework that I use for work, I've finally decided to go further than just reading the documentation and start a project using VueJS.
Even though I've never had anything against it, I've always loved the "Javascripty" nature of React, and had a little bit of apprehension regarding Vue's binding system for everything. I found it less elegant than good old javascript.
But getting past those ideas, I've gotten myself quite deep inside VueJS, and aside from the feeling of discovering a new framework, I've really got to enjoy the way its designed, and its ecosystem most of all.
This article will be the first in a series of how I did the mind switching from React to Vue. Starting with my switch from classic Redux to Vue's own state management system: VueX.
First, both of Redux of VueX are, of course, heirs to the Flux pattern, the central state management system created by Facebook. The classical Actions -> Store -> Vue pattern applies here as well.
Redux deviated a bit from Flux (only one central store instead of multiples ones), but stayed overall very similar in its ideas.
VueX also takes the single store concept, but removed the immutability part of it that was the one of the key principles around Redux Reducers. VueX replaces the said actions/reducers with a actions/mutations system, so getting into VueX is quite straightforward to get a hang of for a Redux veteran.
The part that got my head spinning was the way that vue handles changes detection.
I got stupidly stuck during my experimentation with VueX getters, that were supposed to be reactive (Reactive is the term defined by Vue to say that changes will trigger a re-render of the current component instance).
While experimenting with an Object containing other objects that changed over time, I couldn't understand why no changes happened in my page.
After looking around for some time, I've found in Vue's documentation a passage explaining the changes detection caveats:
Due to limitations in JavaScript, there are types of changes that Vue cannot detect. However, there are ways to circumvent them to preserve reactivity.
I won't argue here about the immutable/mutable debate, there a lot to say about that as well. But the fact that VueX has chosen to mutate its data created the need to use a specific call when using complexes data structures (such as Arrays and Objects) that need to be checked for changes.
Redux addressed this in its explaining for why choosing immutability was important for them:
In particular, immutability in the context of a Web app enables sophisticated change detection techniques to be implemented simply and cheaply, ensuring the computationally expensive process of updating the DOM occurs only when it absolutely has to (a cornerstone of React’s performance improvements over other libraries).
To get the reactivity on objects, you need to use Vue.set that will add reactive properties to your state.
// Example of store mutation using Vue.set
mutations: {
mutationA: (state, payload) => {
Vue.set(state, 'entries', { ...state.entries, [payload.uuid]: payload });
},
}
Note that you can also Vue.delete to remove an entry.
Closing words
Apart from the way it works with reactivity, I've had no troubles at all switching from Redux to VueX. The pattern you have used with Redux will totally be usable with VueX.
Even more: I've enjoyed the fact that VueX is totally integrated in the VueJS ecosystem, and using the same devTools add-ons for both Vue, Vue-Router and VueX make the development experience very smooth and enjoyable. But we'll talk about that more in my next article !
You can read more about the sources of this article here: