Integration between store modules

Prerequisites

• Store Introduction
• createTableStoreModule
• createCardStoreModule
• createApiStoreModule
• modules/Filters

Опис

Стор однієї сутності зазвичай складається з кількох (стор) компонентів:

1. табличка createTableStoreModule
2. карточка createCardStoreModule
3. фільтри modules/Filters
4. апішки createApiStoreModule

По суті, всі вони потрібні для повноцінної репрезентації сутності в інтерфейсі, але, втім, вони достатньо різні, щоб розділити їх одне від одного на окремі модулі.

Тому, хоча модулів декілька, вони як правило грають всі разом, і складаються однією купкою.

Складаються вони за ось таким форматом, в програмі-максимум:

1. У нас є базовий стор модуль, скажімо, contacts.store.js.
2. Він є інстансом BaseStoreModule дока, та включає в себе, як чайлдів, стор таблички, і стор карточки.
3. І стор таблички, і стор карточки, містять в собі стор апішок для комунікації з бекендом.
4. А стор таблички ще має, як правило, стор фільтрів.

Наглядно

Наглядно це виглядає ось так:

Приклад

А ось так це робиться на прикладі:

// contacts.store.js

import {
   createTableStoreModule,
   createCardStoreModule,
   createApiStoreModule,
   createBaseStoreModule
} from '@webitel/ui-sdk/store';
import FiltersStoreModule from '@webitel/ui-sdk/src/modules/Filters/store/FiltersStoreModule.js';

const filters = new FiltersStoreModule().addFilter([{ ... }]).getModule();

const api = createApiStoreModule({
   state: { api: { getList, get, ... } },
});

const table = createTableStoreModule({
   state: {
      headers,
   },
   getters: tableGetters,
   modules: {
      api,
      filters,
   },
});

const card = createCardStoreModule({
   state: cardState,
});

const contacts = createBaseStoreModule({
   modules: {
      table,
      card,
   },
});

export default contacts;