Convenient use of Redux in vue components

Recently switched from PolymerJS to VueJS for some tasks. Together with polymer, I used Redux through the polymer-redux library . Therefore, all business logic has already been formed at the redux store level. For the vue and redux bundle, I chose the vuedeux library. In awesome vue in the redux section there is another library for bundling redux - revue , but it seemed to me more efficient to use vuedeux , by integrating the redux store directly into “your redux” for vue - vuex , for possible future use.

After creating the vuex store , using the vuedeux plugin , access to the necessary sections of the redux store can be done through the computed properties of the vue component instance. For example, like this (part of the code from examples ):

... computed: { todos () { return this.$store.state.redux.todos }, ... } ... 

And the action creators get into the component instance through the data section, for example :

 new Vue({ ... data: { reduxActions: actionCreators, }, ... }); 

Dispatch actions can, for example, like this:
')

 methods: { addTodo () { this.$store.dispatch(this.$root.reduxActions.addingTodo(text)) }, ... } 

The remaining action creators can be “thrown” directly into the methods section:

 methods: { ...mapActions({ toggleAll: 'COMPLETE_ALL', clearCompleted: 'CLEAR_COMPLETED' }), ... } 

But as for me, this is not very convenient for use, since all action creators will be at the root of the component instance context. And when using them, this method will not be entirely clear for dispatching action or simply performing any internal actions of the component. And I would like to immediately understand that this method is action creators .

For these purposes, I developed the redux-store-mixin mixin for integration with redux actions through a single entry point in the form of the reduxActions method aka the dispatch method from the above polymer-redux library .

Using

We connect the mixin itself:

 import reduxStoreMixin from "redux-store-mixin"; 

We connect our action creators :

 import {actionCreators} from "store/store"; 

And we connect the mapState method from vuex to conveniently “prokidyvaniya” necessary properties from redux store :

 import { mapState } from "vuex"; 

And create an instance of a vue component with a mixin and the necessary properties:

 new Vue({ mixins: [ ... reduxStoreMixin(actionCreators), ... ], computed: { ...mapState({ prop1: state => state.redux.map.prop1, ... propN: state => state.redux.map.propN }), ... }, ... }); 

After that, the action call will look like this:

 this.reduxActions(<name action creator>, ...args); 

where the name action creator is the name of the action creator function,
... args - the list of arguments to call it.

All those who use the polymer-redux library will especially appreciate the beauty of this method.

Conclusion

Similar mixins already exist, for example: Vue-Redux-Mixin-Generator and vue-redux-mixin . But compared to them, my solution has a simpler setup and is more intuitive to use, given that the integration of vue and redux will be implemented through vuedeux .

Github

UPD: Made a fix for the ability to work with redux-wait-for-action . Also, for these purposes, vuedeux had to be fixed, as long as the forked version, but the PR sent, we wait.