Использование магазинов Flux

Question

Я работаю над проектом, который прошел очень короткое время. Уже существует несколько хранилищ флюсов, которые управляют различными аспектами состояния приложения и относительно независимы.

У меня 2 вопроса:

Некоторые из магазинов, которые существуют испускают более чем один тип события изменения. Является ли это показателем того, что магазины обрабатывают слишком много несвязанных данных, которые должны находиться в отдельных магазинах или это обычная ситуация?

Нам нужно написать компонент React, который зависит от более чем одного из уже существующих магазинов, а также должен запрашивать сервер для получения определенной информации для отображения на странице, которая затем позволит пользователю изменить. Таким образом, прежде чем этот компонент сможет отобразить, он должен обеспечить, чтобы все хранилища содержали то, что им нужно, и выдавали действия, чтобы заполнить все, что отсутствует. Мой вопрос в том, как справиться с этим. Было бы лучше создать новый магазин, который извлекает конкретные данные, требуемые компонентом, и зависит от других магазинов (с использованием обычных правил зависимости хранилища флюсов) или для того, чтобы компонент знал, какие конкретные магазины зависят от него напрямую.

Answer 1

Для первой части вашего вопроса: все зависит. Flux не заставляет вас следовать строгим правилам. Например, Redux использует только один магазин для всего. Я работал над проектом, где почти все компоненты имели собственный магазин и еще один, где у нас было единственное хранилище на просмотр, которое обрабатывало модель данных и все дополнительные состояния. Не зная специфику вашего проекта (размер, сложность и т. Д.), Я не могу рекомендовать один за другим. Я бы, вероятно, пошел с минимальным количеством магазинов, которые имеют смысл для вас и вашей команды и рефакторинга по мере необходимости (т. Е. Когда вы чувствуете, что это слишком много или один файл содержит слишком много несвязанного кода). Все, что лучше всего подходит для вашей ситуации и сделает вас наиболее комфортным.

С другой стороны: поскольку вы хотите, чтобы компонент отображался только после заполнения данных для всех магазинов, я бы представил новый магазин для обработки данных сервера и использовал метод Dispatcher waitFor для определения зависимостей. Если вы решите использовать магазины напрямую, вы можете визуализировать компонент, используя какое-то внутреннее состояние с загрузкой элементов, которые отсутствуют или отключить редактирование пользователя, и, как только данные будут извлечены, обновите состояние, чтобы отобразить остальную часть редактирования данных/включения. Это требует большего количества кода, но может привести к лучшему UX. Опять же, все зависит от ваших потребностей.