Главная

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

2017-09-04 в 19:36, admin, рубрики: actions, Dispatch, github, javascript, mixin, open source, redux, vuejs2, Программирование, Разработка веб-сайтов

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

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

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

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

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.

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

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

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

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.

Заключение

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

GitHub

Автор: kolesoffac

Источник