Управление несколькими экземплярами компонентов с помощью Cycle.js + Most.js

В течение последних двух месяцев я пробовал разные подходы к веб-разработке из стеков Angular / React и был полностью очарован функциональным / реактивным программированием. В мгновение ока я обнаружил, что могу писать компоненты Cycle.js сначала с помощью Rx.JS, затем с помощью xstream и, наконец, с помощью Most.js. В этой статье я покажу способ (я уверен, что он не лучший, поэтому я пишу эту статью, чтобы вы могли предложить мне лучшие), как управлять несколькими экземплярами компонентов с помощью Cycle.js и Most.js. . В частности, я остановлюсь на возможностях функций combArray и chain из API Most.Js.

Что мы будем делать?

Мы хотим создать страницу, которая показывает форму выбора опций, позволяющую пользователю выбирать, сколько экземпляров компонента должно отображаться. Пользователь должен иметь возможность изменить это число в любое время, и экземпляры компонентов должны обновляться соответствующим образом (реактивно). Хотя этот пример может показаться немного теоретическим, я думаю, что на самом деле он имеет множество практических применений.

Компонент

Для простоты наш компонент будет формой ввода, метка которой обновляется, когда пользователь вводит; вот код:

Ничего страшного, всего лишь простой компонент. Мы можем сохранить этот файл как src / components / userinput.js.

Повторное использование нашего компонента

Теперь, когда у нас есть крошечный компонент, мы хотим повторно использовать его на странице, которая позволяет пользователю решать, сколько экземпляров компонента будет отображаться. Обратите внимание, что благодаря @ cycle / isolate каждый экземпляр компонента будет действовать так, как будто он единственный в наличии. Давайте начнем писать наш app.js в разделе src /.

1. Давайте сначала импортируем необходимые библиотеки + наш компонент в src / components /

import most from 'most'
import Cycle from '@cycle/most-run'
import {makeDOMDriver, label,
  div, select, option} from '@cycle/dom'
import UserInput from './components/userinput'

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

Наша функция InstancesCombiner принимает два аргумента: экземпляры, которые представляют количество экземпляров, которые мы хотим, чтобы наша функция объединяла, и, конечно же, источники, которые мы Позже мы увидим, как использовать эту функцию. Все, что делает эта функция, - это создает массив экземпляров компонентов:

for (let i = 0; i < instances; i++) {    arrayOfComponents.push(UserInput(sources).DOM)

и объедините их в один поток, чтобы вернуть его:

let combinedStream = most.combineArray(
  (...args) => div([...args]), arrayOfComponents)  
return combinedStream

предыдущая строка кода очень эффективна, поскольку позволяет объединить все потоки внутри массива в один.

Завершая все это

Теперь, когда у нас есть ComponentCombinator, мы можем, наконец, реализовать намерение, модель, представление и основной функции:

Обратите внимание на то, что происходит внутри model.chain: мы создаем дополнительную комбинацию между потоком, который отображает необходимый HTML-код, чтобы пользователь мог выбрать номер экземпляра компонента, и потоком, который представляет собой комбинацию вышеупомянутых экземпляров, благодаря функции, которую мы написали ранее.

Обратите внимание, что instance_number исходит из модели:

const model = intent$ => intent$.map(
  selection => selection.target.value)
  .startWith(1)

Итак, наше приложение готово. Вот полный файл app.js:

Посмотрите этот пример на Github здесь

Заключение:

Я новичок в реактивном / функциональном программировании, поэтому уверен, что есть много более интересных способов сделать это, поэтому я с нетерпением жду ваших отзывов и предложений. В любом случае мне очень нравится Cycle.js, поэтому я хотел поделиться своими «экспериментами» с читателями, надеясь, что я разделю не только мой опыт, но и мой энтузиазм по поводу этих технологий. . Спасибо за прочтение.

Использованная литература:

Начните с реактивного / функционального программирования: нажмите здесь;

Начать работу с Cycle.js: нажмите здесь, видеокурс;

Начать работу с Most.js: нажмите здесь