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
    28 фев 2021 в 16:54
  • @Voprositel, вместо redux я использую mobx, он меня в данном случае больше устраивает. На счет создания js файла - не понял. Данные динамические - их нельзя статически сложить заранее в js файл.
    – Zhihar
    28 фев 2021 в 18:10
  • Ну так помимо объекта этот файл будет экспортировать функцию для изменения объекта
    – kertAW
    28 фев 2021 в 18:30
  • @Voprositel, тогда не улавливаю, вы могли бы пример кода привести
    – Zhihar
    28 фев 2021 в 18:37

1 ответ 1

0

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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