Управление государством в Аурелии: как использовать Аурелию с Redux

 // file: src/app.html <template> <require from="./markdown-redux"></require> <markdown-redux raw.bind="data"></markdown-redux> </template> 

Обновление App.html для визуализации Redux-Component

Реализация Отменить / Повторить

До сих пор мы только что адаптировали наш оригинальный компонент Aurelia для использования рабочего процесса Redux. Честно говоря, пока не так много пользы. Почему мы сделали все это? Наличие единой точки, где происходят обновления, могло бы быть сделано и с помощью подхода чистой Aurelia. Оказывается, еще раз, все дело в функциях, которые делают этот подход значимым. На следующем шаге мы увидим, как мы можем добавить функции отмены и возврата в наш компонент, чтобы обрабатывать изменения состояния во времени и перемещаться между ними.

Начнем с создания новых файлов markdown.html и markdown.js в нашей папке src . Опять же, в обоих этих файлах мы можем просто скопировать существующий код Aurelia и на следующих шагах добавить к ним дополнительный код.

На этот раз мы сделаем это наоборот и сначала посмотрим на представление. Здесь мы добавляем новый элемент <div> над разделом markdown-editor . Внутри этого элемента мы размещаем две кнопки, которые будут действовать как триггеры отмены и повтора. Мы также хотели бы отобразить количество предыдущих состояний ( pastCount ) и будущих ( futureCount ) внутри соответствующих кнопок. Мы сделаем это с помощью простой интерполяции.

 // file: src/markdown.html <template> <require from="./styles.css"></require> <h1>Aurelia Markdown Redux</h1> <div class="toolbar"> <button click.trigger="undo()">(${pastCount}) Undo</button> <button click.trigger="redo()">Redo (${futureCount})</button> </div> <div class="markdown-editor cf"> ... </div> </template> 

Компонент уценки с отменой / возвратом — просмотр

Теперь пришло время взглянуть на изменения в ViewModel. Создатель действия и редуктор остаются прежними, но новшеством является импорт функции ActionCreators функции ActionCreators из модуля ActionCreators -undo. Обратите внимание, что undoable функция экспортируется по умолчанию, поэтому мы можем избавиться от фигурных скобок. Мы используем эту функцию, чтобы обернуть нашу textUpdater редуктора textUpdater , которую мы передаем createStore . Это все, что нужно для того, чтобы наш магазин мог обрабатывать и отменять функциональность.

В дополнение к этому мы futureCount свойства pastCount и futureCount , которые мы инициализируем нулем. Рассматривая метод update мы теперь видим, что метод getState по умолчанию вместо возврата состояния возвращает объект с getState , past и future состояниями. Мы используем present состояние, чтобы присвоить новые значения нашим html и raw свойствам. Поскольку past и future — это массивы состояний, мы можем просто использовать их свойство length для обновления наших значений. Наконец, что не менее redo методы undo и undo теперь отправляют новые действия, автоматически ActionCreators объектом ActionCreators .

 // file: src/markdown.js import marked from 'marked'; import { bindable } from 'aurelia-framework'; import { createStore } from 'redux'; import undoable from 'redux-undo'; import { ActionCreators } from 'redux-undo'; export class Markdown { @bindable raw; html = ''; store = createStore(undoable(textUpdater)); pastCount = 0; futureCount = 0; constructor() { ... } update() { const state = this.store.getState().present; this.html = state.html; this.raw = state.raw; this.pastCount = this.store.getState().past.length; this.futureCount = this.store.getState().future.length; } keyupHandler(newValue) { ... } undo() { this.store.dispatch(ActionCreators.undo()); } redo() { this.store.dispatch(ActionCreators.redo()); } attached() { ... } } 

Компонент уценки с отменой / повтором — ViewModel

Снова обновите app.html чтобы создать окончательную версию компонента.

 // file: src/app.html <template> <require from="./markdown"></require> <markdown raw.bind="data"></markdown> </template> 

Обновление App.html для визуализации Redux-Component

И это все, что нужно. Причина, по которой все это работает так легко, в том, что мы следовали стандартному рабочему процессу, который предлагает Redux.

Вывод

Архитектура Redux вращается вокруг строгого однонаправленного потока данных. Это имеет много преимуществ, но также имеет свою цену. Если вы сравните исходный путь Aurelia с первым переписыванием Redux, вы увидите, что здесь задействовано гораздо больше шаблонов. Конечно, есть абстракции и более приятные интеграции, такие как плагин aurelia-redux-plugin (который добавляет еще один классный подход с диспетчерами диспетчера и селектора), но в конце концов, это либо вопрос большего количества кода, либо больше вещей для изучения.

Я обнаружил, что при оценке новых концепций, самое главное, чтобы действительно понять, как они работают. Только тогда вы действительно сможете решить, подходит ли вам компромисс между сложностью и стабильностью. Лично мне нравится идея думать о моем приложении как о множестве состояний, и я более чем рад видеть простую интеграцию из коробки (и даже более глубокую, такую ​​как вышеупомянутый плагин) в вашем распоряжении с Aurelia ,

Я надеюсь, что вам понравился этот пример, и теперь у вас есть лучшее представление о том, как вы могли бы применить свои существующие навыки Redux к Aurelia или заимствовать идеи и применять их в своем подходе к разработке по умолчанию. Дайте нам знать об этом на официальном канале Aurelia Gitter или в комментариях ниже.