VPF::Как организовать mobx store? - Форум программистов

manking

Дата 20.8.2018, 12:51 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 36
Регистрация: 8.11.2011

Репутация: нет
Всего: нет

Есть код, где в store в state хранится folder_id, employeesList и currentEmploySelect. То есть текущая папка, список сотрудников и текущий выбранный сотрудник. Store 1 на всё приложение. Сейчас реализовали вывод списка сотрудников папки №6 и очистку этого списка при клике по кнопке.

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

Код



import { decorate, observable, configure, action, computed } from "mobx";
import { observer } from "mobx-react";

configure({ enforceActions: true }); // Не допускать изменение состояния вне actions


class Store {
  // Состояние с которым можно работать
  state = {
    folred_id: 3,
    employeesList: [
      { id: 1, name: "John Doe", salary: 150}
    ],
    currentEmploySelect: null
  };

  // Очищаем список сотрудников
  clearList(){
    // Присваивание через копирование
    this.state = {...state , employeesList: []} 
  }

  get currentEmploySelected() {
    return this.state.currentEmploySelect;
  }
}

decorate(Store, {
  // Наблюдаемое свойство
  employeesList: observable,

  // Действие и изменение объекта
  clearList: action,

  // 
  currentEmploySelected: computed
});

export default Store;

Отсюда вопрос, куда и как в этом singleton классе Store добавить еще и данные, свойства и методы для системы каталогов. Например так? Добавив свойства в объект state store в которых и будут хранится данные приложения. Либо же лучше создать еще 1 store где будут храниться данные каталогов?

Код



state = {

    data: {
      employeesList: [{ id: 1, name: "John Doe", salary: 150 }],
      currentEmploySelect: null
    },

    foldersEmployersData: {
      folders: [
        {
          name: "Отдел бухгалтерии",
          id: 6
        }
      ],
      currentOpenFolder: 12
    },
    foldersGoodsData: {
      folders: [{ name: "Электро инструменты", id: 6 }],
      currentOpenFolder: 6
    }
  };

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »