Полимер любит Redux

Веб-компоненты - это прекрасный способ разбить веб-приложения на небольшие части, которые можно использовать повторно. Кодирование с помощью Polymer, даже повторное использование перестает казаться запоздалой мыслью, но что-то естественное.

Децентрализация рушится ... но не везде

Тем не менее, хотя компоненты UX сильно выигрывают от децентрализации, другие аспекты приложения действительно требуют централизации. Возьмем, к примеру, приложение для задачи: отметка задачи как выполненная на странице сведений о задаче должна добавить галочку на странице списка задач и уменьшить счетчик открытых задач.

Связывание данных Polymer может справиться с такими простыми ситуациями, но быстро превратится в беспорядок, когда приложение станет немного более сложным: все части приложения могут изменять данные, тем самым инициируя другие обновления, которые, в свою очередь, снова запускают мутации.

В то же время в другом мире

Сюрприз, сюрприз, эта проблема, конечно же, не связана с полимером. Фактически, сообщество React столкнулось с точно такой же проблемой и решило ее с помощью паттерна Flux, который предписывает однонаправленный поток данных для уменьшения общей сложности системы. Лучше всего то, что Flux - это не фреймворк (специфичный для React), а просто шаблон, который реализуется многими библиотеками.

Недавно на смену пришла одна конкретная реализация Flux: Redux, которая еще больше снижает сложность, ограничиваясь чистыми функциями, которые генерируют новые версии состояния приложения только для чтения. Хотя Redux - это библиотека, она снова не зависит от React (хотя в основном там используется). Помимо того, что Redux зарекомендовал себя в битвах, он приобрел большое сообщество разработчиков и предлагает массу потрясающих учебных материалов.

Итак, вместо того, чтобы изобретать колесо: как насчет того, чтобы позволить Redux обрабатывать состояние наших приложений Polymer?

Женитьба на полимере и Redux

Кристофер Тернер написал polymer-redux, полимерную привязку, которая упрощает использование Redux как торт (посмотрите его страницу Github, чтобы получить отличное руководство по началу работы).

Вкратце, polymer-redux делает состояние хранилища Redux доступным через свойства Polymer. Например, чтобы привязать свойство todos к пути todos.all в Redux Store:

var ReduxBehavior = PolymerRedux(MyReduxStore);
Polymer({
  is: "my-element",
  properties: {
    todos: {
      type: Array,
      statePath: "todos.all",
      readOnly: true
    },
  },
  behaviors: [
    ReduxBehavior
  ]

Любой элемент с поведением PolymerRedux может также отправлять действия в хранилище Redux для запуска редукторов:

this.dispatch({
  type: 'TOGGLE_TODO',
  id: id
});

И это все, что есть на склейке! Все остальное - чистый полимер и чистый Redux. Очень сладкий.

Удачного кодирования!

Хотите узнать больше о полимере? Читайте все наши Средние сообщения о полимере.

Полимер любит Redux