Как обрабатывать переходы состояния в компоненте React/Flux

Question

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

Поскольку текущий компонент на основе базовой линии разбит многими способами, я хотел бы переопределить этот компонент поиска, используя React и, возможно, Flux архитектуры.

При планировании оказался, что мой компонент имеет, по меньшей мере, ряд 10 различных состояний (возможно даже больше), он должен реагировать на actions вызванных данными, вводимого пользователя, а также к actions вызванным асинхронными ответам сервера.

Вопрос1: Должен ли я моделировать все состояние в store вместо родительского компонента? Это означает, что каждый пользовательский ввод изменяет состояние магазинов, например :searchQuery, :searchResults, и мой компонент родительского представления реагирует на это изменение состояния?

Вопрос2: Или я должен моделировать все состояние в самом родительском компоненте и опустить store, dispatcher и actions полностью?

Question3: Независимо от обработки состояния в store или в самом родительском компоненте, оказалось, что сам компонент может иметь по крайней мере 10 различных состояний, и там должно быть только определенное количество переходов, разрешенных. Обычно, я бы включил реализацию statemachine здесь, смоделировал все :states и разрешил :transitions и выполнял переходы каждый раз, когда действие принимается store, или в родительском компоненте вызывается метод обратного вызова. Каков правильный React way для обработки states и transitions между этими states в компоненте?

Вопрос4: Что представляет собой современная реализация Flux для Javascript? До сих пор я видел reflux, но я не уверен, это мой яд.

Я открыт для всех предложений.

Answer 1

Я строил аналогичный компонент в React с flux прямо сейчас, и я работал с Backbone экстенсивно в прошлом, поэтому, надеюсь, я даю вам некоторое представление.

Я полагаю, что ваше решение Backbone имело модель, локальную для вашего поиска, которая построила :searchQuery, когда поле было обновлено. На обратном вызове ajax вы, скорее всего, просто обновили :searchResults.

1-2:

С flux там заканчивается время немного больше шаблонного кода, но в моем опыте, если я не построить магазин, чтобы начать с я всегда жалею об этом. При этом я бы сделал SearchStore для :searchResults и сохранил :searchQuery в состоянии родительского компонента.

Таким образом, когда вы готовы к вызову вашего поиска, вы используете действие вида SearchViewActions.getSearchResults(:searchQuery), которое делает вызов ajax и в обратном вызове SearchServerActions.receiveSearchResults(:searchQuery, :searchResults) и обновляет хранилище. Затем ваш компонент результатов может прослушивать изменения Store и звонить SearchStore.getResults(), когда он видит изменение. Это помогает модулизовать два подкомпонента, где, поскольку опция плотно соединяет два компонента и усложняет повторное использование внешних компонентов.

3:

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

4:

Reflux выглядит великолепно, как кажется, чтобы уменьшить шаблонный совсем немного. Рефлюкс может работать или не работать, как и запасы Flux.

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