Удобное использование Redux в vue-компонентах

Недавно перешел с PolymerJS ^[1]на VueJS ^[2]для некоторых задач. Совместно с polymer использовал Redux ^[3]через библиотеку polymer-redux ^[4]. Поэтому вся бизнес-логика уже была сформирована на уровне redux store. Для связки vue и redux выбрал библиотеку vuedeux ^[5]. В awesome vue ^[6] в разделе redux ^[7] представлена еще одна библиотека для связки с redux — revue ^[8], но мне показалось эффективней использовать именно vuedeux, за счет интеграции redux store непосредственно в «свой redux» для vue — vuex ^[9], для возможного использования его в будущем.

После создание vuex store, используя плагин vuedeux ^[10] доступ к необходимым разделам redux store может быть осуществлен через computed свойства экземпляра vue-компонента. Например, вот так (часть кода из examples ^[11]):

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

А action creators попадают в экземпляр компонента через раздел data, например ^[12]:

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

Диспатчить экшены можно, например, так:

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

Остальные action creators можно «прокинуть» напрямую в раздел methods:

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

Но как по мне это не очень удобно для использования, так как все action creators будут в корне контекста экземпляра компонента. И при их использовании будет не совсем понятно этот метод диспатчит экшен или просто выполняет какие-либо внутренние действия компонента. А хотелось бы сразу понимать, что данный метод является action creators.

Для этих целей я разработал миксин ^[13]redux-store-mixin ^[14] для интеграции с redux actions через единую точку входа в виде метода reduxActions aka метод dispatch из вышеупомянутой библиотеки polymer-redux ^[4].

Использование

Подключаем сам миксин:

import reduxStoreMixin from "redux-store-mixin"; 

Подключаем свои action creators:

import {actionCreators} from "store/store";

И подключаем метод mapState из vuex для удобного «прокидывания» необходимых свойств из redux store:

import { mapState } from "vuex";

И создаем экземпляр vue-компонента с миксином и необходимыми свойствами:

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

После этого вызов экшена будет выглядеть следующим образом:

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

где name action creator — наименование «action creator»-функции,
...args — перечень аргументов для ее вызова.

Всю прелесть данного метода особенно прочувствуют те, кто пользовался библиотекой polymer-redux ^[4].

Заключение

Подобные миксины уже существует, например: Vue-Redux-Mixin-Generator ^[15] и vue-redux-mixin ^[16]. Но по сравнению с ними мое решение имеет более простую настройку и более наглядно в использовании, с учетом, что интеграция vue и redux будет осуществлена через vuedeux ^[5].

GitHub ^[14]

Автор: kolesoffac

Источник ^[17]