Шаг 2: Как структурировать большие приложения Polymer 2 с Redux Reselect

Трехэтапное руководство по интеграции Redux в более крупное приложение Polymer 2, демонстрирующее рабочий пример.

Шаг 2 показывает, как использовать Redux Reselect в полимерном приложении. Если вы уже знакомы с Redux Reselect и хотите узнать больше о вызове конечных точек API с помощью Redux, переходите к Шагу-3!

// If you want to clone this tutorial:
git clone https://github.com/JaySunSyn/ReduxTodo.git

и не забудьте раскомментировать импорт шага 2 в index.html

<!-- <link rel="import" href="/step-1/my-app.html"> -->
<link rel="import" href="/step-2/my-app.html">
<!-- <link rel="import" href="/step-3/my-app.html"> -->

В предыдущем посте мы поместили всю логику редукции в один файлredux-mixin.html. (см. каталог/step-1/).

Это может стать довольно запутанным, потому что:

1. Редукторы, скорее всего, взорвутся.
2. В наших элементах Polymer мы жестко кодируем типы действий и пути состояний. Если что-то меняется, нам нужно менять это везде.
3. Не повторяйся. Если наши требования к нормализации объекта меняются, мы хотим выполнить это изменение в одном месте.

Итак, давайте создадим еще 3 файла:

Селекторы

redux-selectors.html

Во-первых, давайте установим повторный выбор

npm install --save reselect

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

= ›Селекторы могут вычислять производные данные, позволяя Redux сохранять минимально возможное состояние.

= ›Селекторы работоспособны. Селектор не пересчитывается, пока не изменится один из его аргументов.

= ›Селекторы можно компоновать. Их можно использовать в качестве входных данных для других селекторов.

Давайте посмотрим на облегченную версию нашего селекторного кода:

У нас есть два селектора. todos, который просто возвращает массив задач состояния и todosUpper, который возвращает версию нашего массива задач в верхнем регистре. Они пересчитываются каждый раз, когда state.todo.todos изменяется.

Давайте посмотрим, как изменяются свойства нашего <todo-list> элемента при наличии селекторов.

До:

static get properties() {
    return {
        todos: {
            type: Array,
            statePath: ‘todos’, // hard coded
        },
    };
}

После:

static get properties() {
    return {
        todos: {
            type: Array,
            statePath: App.select.todos, // cool
        },
        // let's get also the upper case version    
        todosUpperCase: {
            type: Array,
            statePath: App.select.todosUpper,
        },
    };
}

Теперь мы можем ссылаться на вычисленные селекторы в атрибуте statePath наших элементов - что намного чище.

Действия

redux-actions.html

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

Код довольно прост:

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

Редукторы

Как и в случае с действиями, давайте просто поместим редукторы в отдельный файл.

Здесь особо ничего не изменилось. Мы делаем Reducer доступным в глобальном пространстве только через App.rootReducer.

ReduxMixin

redux-mixin.html

Место, где все сочетается.

Обратите внимание, что App.ReduxMixin основан на ActionsMixin, где мы определяем геттер действий.

Использование его в наших полимерных элементах

Мы расширяем наш элемент с App.ReduxMixin, чтобы включить магию Redux. Обратите внимание, что нам больше не нужно писать геттер действий. Мы ссылаемся на действие, которое мы отправляем, с помощью App.actions.remove и передаем нашу задачу.

Намного лучше, правда?

Джалал Фатхи - внештатный разработчик программного обеспечения и основатель стартапа. Увлечен веб-технологиями и влюблен в Polymer. Узнайте больше о том, как он может помочь вам в создании вашего следующего цифрового продукта. Он работает, где хочет, и старается поймать хорошую волну, где только может. Он написал эту биографию самостоятельно, а писал от третьего лица.

Затем узнайте, как мы можем асинхронно вызывать конечную точку API с помощью промежуточного программного обеспечения.