22.12.2022 09:57
aughing 0 720 Источник

Состояние SPA (одностраничное приложение на javascript) и управление состоянием — бесконечная тема. У всякого популярного js-фрейморка есть пара, тройка решений на этот счет. "Их есть" и без фреймворков и библиотек, с помощью несложной функции и javascript, просто способ управления состоянием (паттерн, шаблон). Автор назвал его Мейоз. Название довольно так себе на мой взгляд, но автору виднее.

Основа паттерна — поток (stream), на удивление простая, но "крутая" идея реактивного функционального программирования. Одной структуры данных и нескольких функций достаточно, чтобы управлять состоянием приложения, не особо "заморачиваясь".

Stream - поток

Реактивное программирование — программирование с использованием асинхронного потока данных. Поток — реактивная структура данных, типа ячейки в таблице Excel. Если значение ячейки С2 равно сумме значений в ячейках A1 и B1, то при изменении значений в любой из них, значение С2 изменится. Аналогично поток может зависеть от других потоков, изменения в которых, изменяют зависимый. В статье будем использовать Mithril.stream.

// поток это функция
const username = m.stream()
// сейчас путо
console.log(username()) // logs undefined

// значение аргумента – текущие данные в потоке
username("John")
console.log(username()) // logs "John"

// поток хранит только последний аргумент
username("John Doe")
console.log(username()) // logs "John Doe"

// значением может быть любой объект js
const state = m.stream({}); // объект
const update = m.stream( v => v+1 ); // функция
const prop = m.stream(Symbol('prop')); // символ

Пара замечательных функций (операторов) на потоках:

// map - связывание потоков
const ints = m.stream();
const mul = v => v * 5;
const ints_five_times = ints.map(mul);
ints(2);
// при изменении основного потока ints
// в потоке ints_five_times будет число умноженное на 5
console.log(ints_five_times()); // logs 10

// scan - свертка потоков
const fold = (acc, value) => acc + value;
const folded_ints = m.stream.scan(fold, 0, ints);
// при изменениии отсновного потока ints
// в потоке folded_ints будет сумма всех последовательных значений ints
console.log(folded_ints()); // logs 2
ints(5);
console.log(folded_ints()); // logs 7
ints(10)
console.logs(folded_ints()); // logs 17

Паттерн Мейоз

Суть шаблона заключается в том, что текущее состояние (глобальное или локальное) находится в потоке в виде объекта js. Поток состояния — это свертка, которая вычисляется всякий раз, когда происходит обновление в другом потоке — потоке обновлений состояния.

// объект содержащий начальное состояние приложения
const app = {
  initial: {
    boxes: [],
    colors: ["red", "purple", "blue"],
    description: '',
    stat: []
  },
};

// поток обновлений
const update = m.stream()

// сверточная функция
const fold = (state, patcher) => patcher(state);

// поток состояния – свертка последовательных состояний
const states = m.stream.scan(fold, app.initial, update);

Поскольку значением потока update может быть любой объект, то в данном случае, таким объектом будет функция с единственным параметром — текущим состоянием, которая должна вернуть новый объект состояния (по смыслу свертки scan).

Определим набор функций, которые изменяют состояние:

const Actions = {
  addBox(update, color) {
    // в поток update помещаем функцию
    update( state => Object.assign(state,
      { boxes: state.boxes.concat( color )}
    ))
  },
  removeBox(update, idx) {
    update( state => Object.assign(state,
      boxes: state.boxes.filter((x, j) => idx != j)
    ))
  }
}
// Всякий раз, когда мы вызываем
// Actions.addBox(update, "red");
// в массив boxes будет добавляться строка "red"
// и в поток states будет записываться новое состояние
// Actions.removeBox(update, 3);
// из массива boxes будет удаляться элемент с индексом 3
// если он там есть

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

Тестовое приложение

Идею и часть кода тестового приложения я позаимствовал у James Forbs-а. Идея приложения — есть набор из кубиков разного цвета в виде строки меню, и табло под ним. Кликаем по кубику в меню — такой же появляется на табло. Дополнительно на табло выводится текстовая строка описывающая количество и тип всех выбранных кубиков. Клик по кубику на табло удаляет его, и соответственно изменяется строка описания. Можно думать об этом, как о выборе типа блюда (пиццы) из меню, например.

Несколько замечаний относительно оригинальной идеи шаблона и плана реализации. Мне не очень нравится авторская идея потока cells (клетки):

const update = m.stream();
const states = scan(...);
const getState = () => states();
const createCell = (state) => ({ state, getState, update });
const cells = states.map(createCell);

И поскольку реализация шаблона — дело творческое, cells я не буду использовать, но предлагаю использовать поток disp (диспетчер кастомных событий). По моему мнению, диспетчер событий хорошо подходит для управления в компонентах. Оригинальный подход подробно описан на сайте автора шаблона.

Определим несколько вспомогательных функций для управления состоянием:

// P(atcher) - замыкание для патча
const P = patch => state => Object.assign(state, patch);

// lift - замыкание для потока update
const lift = update => patch => update(P(patch));

// поток кастомных событий
const disp = m.stream();

Потоки update, states, функция fold, начальное состояние (app.initial) будут таким же, как указано выше. Переопределим только actions, превратив объект в функцию, возвращающую объект. В приложение будем использовать библиотеку Ramda, чтобы не писать кучу лишнего кода (префикс R).

const I = x => x; // identity

// анализ массива и вывод текста с союзом s
const humanList = s => xs => xs.length > 1 ?
  `${xs.slice(0, -1).join(", ")} ${s} ${xs.slice(-1)}` :
  xs.join("");

// формируем строчку описания
const descString = R.pipe(
  R.toPairs,
  R.groupBy(R.last),
  R.map(R.map(R.head)),
  R.map(humanList("and")),
  R.toPairs,
  R.map(R.join(" ")),
  humanList("and"),
  x => x + "."
)

// returns actions object
const Actions = (state, update) => {
  // определим вспомогательную функцию
  const stup = lift(update);
  // поскольку lift - замыкание, то вызов stup с объктом патча как параметром
  // вызывает обновление update, и соответвенно всего состояния

  return {
    // событие добавить кубик на табло
    addBox(color) {
      return this.countStat(
        state().boxes.concat(color[0])
      );
    },
    // удалить кубик
    removeBox(idx) {
      return this.countStat(
        state().boxes.filter((x, j) => idx[0] != j)
      );
    },
    // посчитать статистику и вывести текст
    countStat(boxes) {
      let stat = R.countBy(I, boxes), description = descString(stat);
      stup({boxes, stat, description});
      return false;
    }
  };
};

Далее инициализируем приложение, этот код можно сделать более общим, но для демонстрации сути убрано все лишнее.

// функция инициализации
const initApp = (actions) => {
  // инициализация диспетчера событий
  disp.map(av => {
    let [event, ...args] = av;
    return actions[event] ? actions[event](args) : m.stream.SKIP;
  });
};
// собственно инициализация приложения
initApp(Actions(states, update));

Для рендеринга я буду использовать библиотеку mithril, поскольку мне привычнее функциональный стиль определения компонентов и автоматическая перерисовка после событий DOM.

// определяем компонет
const BoxesView = function(state, disp) {

  // обработчик клика добавить
  const add = (evt, color) => {
    evt.preventDefault();
    return disp(['addBox', color])
  }
  // обработчик клика удалить
  const remove = (evt, idx) => {
    evt.preventDefault();
    return disp(['removeBox', idx])
  }
  return {
    view: function() {
      return m(".app", [
        m("nav.header", [
          m("h1", "Boxes"),
          state().colors.map(color =>
            m("button", {
              style: `background-color: ${color}`,
              onclick: evt => add(evt, `${color}`)
              }, "+"
            )
          )
        ]),
        m("p", state().description),
        m(".desc",
          state().boxes.map((x, i) =>
            m(".boxs", {
              style: `background-color: ${x}`,
              onclick: evt => remove(evt, i)
              }
            )
          )
        )
      ])
    }
  }
}

Монтируем компонент к элементу (states и disp у нас видны глобально):

m.mount(
  document.getElementById('app'),
  BoxesView(states, disp)
);

Применение шаблона для react можно найти на сайте автора шаблона. Там же, есть описание очень неплохого инструмента meiosis-tracer, который может работать как часть вашего приложения и/или как расширение для Chrome. Tracer позволяет в реальном времени наблюдать за потоками в целевом приложении.

Код тестового приложения можно посмотреть на github-е.

Комментарии (0)