How to Bind Veux with Redux

Recently, my team and I were working with Vue and came across an interesting issue, developers were looking for a way to bind Redux to a Vue/Vuex application. Now there are currently bindings for connecting Redux to vanilla Vue, but nothing existed that incorporates Veux. So we said, “Hey, we can take on that challenge!”

The first question we had to answer though was “why?” Why bother binding Redux to Vuex?

Before answering that, just a quick sidebar for those not familiar with these technologies, Redux is a state management library developed by Facebook initially to be used with the React Javascript front end framework. Vuex is the state management equivalent to Redux, but designed by Evan You, creator of the Vue Javascript framework, built specifically from the ground up to work with Vue. So, back to the reasons for binding these two:

  1. Enable developers to easily integrate a pre-existing Redux store into a Vue/Vuex application without changing a line of code the Redux store’s code.
  2. Open up the Vue/Vuex ecosystem to the wide range of resources, middlewares, dev tools, and bindings that exist for Redux.
  3. Simplify the process for incorporating Vue components into a large-scale application or transitioning to a full Vue stack.

Compelling reasons indeed! With these goals in mind, we created Vuedeux, a lightweight open-source utility layer for binding Vuex to Redux that allows developers to reuse their pre-existing Redux state management libraries.

How it works:

Vuedeux is a simple plugin that takes Redux action types and a Redux store, and then maps your Redux state and all associated actions to a Vuex module with equivalent actions and mutations. The corresponding Vuex actions dispatch to Vuex (just like they would in Redux) and from there relay the actions back to the Redux store. The Vuex store subscribes to any state changes in the Redux store and then transfers them to the root component and necessary child components.

The Magic of Vuedeux

Additional features:

Vuedeux was also designed to work with asynchronous Redux middlewares such as Thunks, which we accomplished by rewriting the native vuex.dispatch() function and extending its functionality so that it recognizes when it is being passed these functions or promises rather than a normal object and passes that item to be processed by Redux middleware. Unlike Redux, the Vuex store has the ability to be modularized which allows for developers to add additional state properties and actions directly in Vuex that are not associated with the bound Redux store. Because actions are dispatched to both Vuex and Redux, both the Vuex and Redux dev tools can be used to debug during the development process, an added bonus!

Get started using Vuedeux:

To learn more about Vuedeux, browse the documentation, fork the Github repo, and incorporate it into your next project visit vuedeux.com.