@codeleaf-sdk/core v2.1.11

@codeleaf-sdk/core

Очень простое управление микро-архитектурой приложения

Полезные ссылки

Wiki Обсуждение

Описание

Эта библиотека предназначенна для помощи в создании React-приложений с чем-то похожим на архитектуру. За основу взят MobX. Библиотека позволяет организовать поток данных через инъекцию зависимостей (как в NestJS), а так же более приятно управлять состоянием.

Установка

yarn add @codeleaf-sdk/core

# required dependencies
yarn add mobx mobx-react-lite react

Пример инициализации хранилища

type Item = {
  id: number;
  name: string;
}

type Test = {
  value: number,
  arrayed: Item[];
}

class Tested extends Store<Test> {
  constructor() {
    super({
      value: 1,
      arrayed: [
        { id: 1, name: 'foo' },
        { id: 2, name: 'bar' }
      ],
    });
  }
}

Пример изменения поля value

const test = new Tested();
test.set('value', 2);

// Да, вот так просто!

Пример изменения элемента массива

const test = new Tested();
test.setItem('arrayed', ({ id }) => id === 1, { name: 'test' });

// Не то, чтобы это очевидная конструкция
// Но очень полезная!

Пример инициализации модуля с зависимостями

const { Store, Service } = CreatePageModule<PageStore, PageService>({
  store: [
    PageStore,
    [
      { target: FetchStore, args: [] },    /* controls data's fetch state */
      { target: TogglersStore, args: [] }, /* controls view mode */
      { target: TogglersStore, args: [] }, /* controls visibility */
    ],
  service: [PageService, null /* no dependencies */],
});

Пример использования зависимостей в хранилище

class PageStore extends Store<PageStoreType> {
  constructor(
    readonly fetch: FetchStore,         // автоматически добавляются в поля класса
    readonly viewMode: TogglersStore,
    readonly visibility: TogglersStore,
  ) {
    // 
  }

  someMethod() {
    this.viewMode.set('state', true); // использование зависимости
  }
}