0

Подскажите как правильно построить архитектуру сайта на react с использованием mobx для следующей задачи:

есть несколько моих компонент (выпадающие списки и т.п.), которые заполняются на основании данных, полученных по запросу от сервера

поэтому несколько вопросов:

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

как вариант можно создать переменную в document или window, но это больше подходит для голого javascript 20 века :) и может сейчас есть какие-то нормальные варианты

  1. как сделать так, чтобы мои компоненты обновлялись с изменением этих глобальных данных

п 2) я могу сделать в лоб -

  1. получать и хранить данные в главном родительском компоненте App,
  2. данные сделать наблюдаемыми (@observable)
  3. каждый мой компонент сделать наблюдателем (@observer)
  4. протащить "указатель" на данные из родителя до моих компонент

п. 4) очень смущает, потому что очень не хотелось бы устраивать такое "протаскивание", хочется чтобы компонент просто знал о данных, которые есть в главном родителе, но элементы между ними во всем этот не участвовали

подскажите где я что-то не так учитываю или двигаюсь в неправильном направлении

4
  • Просто создать js файл, который экспортирует объект с нужными вам данными и функцию, меняющую этот объект. Чтобы обновлять DOM, нужно не просто напрямую вытащить данные, я поместить их в state. Или можно использовать redux, вроде он поддерживает грамотное хранение данных для удобной работы с ними в react
    – kertAW
    Commented 28 февр. 2021 в 16:54
  • @Voprositel, вместо redux я использую mobx, он меня в данном случае больше устраивает. На счет создания js файла - не понял. Данные динамические - их нельзя статически сложить заранее в js файл.
    – Zhihar
    Commented 28 февр. 2021 в 18:10
  • Ну так помимо объекта этот файл будет экспортировать функцию для изменения объекта
    – kertAW
    Commented 28 февр. 2021 в 18:30
  • @Voprositel, тогда не улавливаю, вы могли бы пример кода привести
    – Zhihar
    Commented 28 февр. 2021 в 18:37

1 ответ 1

0

Для хранения данных, что с помощью мобх, что редукс, используется древо состояний, древо содержит все состояния объектов глобально, так что ты сможешь легко к ним обращаться и перезаписывать в переменные внутри древа. Отвечаю на второй вопрос: используй условный рендеринг. Алгоритм следующий... Древо состояний содержит начальное состояние всех компонентов приложения (initialState) => рендер компонента в соответствии с initialState => событие (action) изменяет состояние компонента => используй редуктор (reducer - чистая функция, которая изменяет значение состояния на иное в древе состояний) => автоматический ре-рендер компонента, приводя его в соответствие с условиями, зависимыми от состояния (state). Надеюсь, понятно объяснил...

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.