Не удается отправить в середине отправки при срабатывании в дочернем компоненте

Question

В настоящее время у меня есть приложение, структурированное таким образом, что у меня есть компонент FormWrapper, который загружает конфигурацию для переданного в FormName, которое может быть представлено React-Router следующим образом -

<Route path="/Diary/Test" components={require('./components/wrapperComponents/formWrapper.jsx')} FormName="AppointmentBooking"/> 

Когда FormWrapper загружает его называет ActionCreator и получает конфигурацию от сервера, о котором странице и делает прохождение страницы в конфигурации через objProps.

render: function() { 
    return(React.createElement(PageComponents[this.props.FormName], objProps); 
} 

Причина делать это таким образом, является то, что первоначально мы хотели, чтобы иметь возможность позволить пользователям иметь возможность легко настроить, как формы выглядели и какие компоненты были показаны так, что позволило нам сохранить формы и их сопровождающие дочерние компоненты в конфигурации, а затем просто загружать их с помощью общего компонента-обертки. Таким образом, любое общее для каждой формы могло бы сидеть в оболочке формы, а затем сформировать определенный код, который мог бы сидеть в каждом компоненте страницы и загружать только части, релевантные этой конкретной странице.

Проблема, с которой я сталкиваюсь, заключается в том, что если в форме компонента AppointmentBooking необходимо запустить действие в методах componentWillMount/componentDidMount для загрузки некоторых данных (например, параметры в раскрывающемся списке для мест назначения), я получаю сообщение «Can not ошибка отправки.

Мое обоснование вопроса состояло в том, что начальное действие, вызванное оболочкой формы, вызывало повторную визуализацию formWrapper, потому что тогда у него были данные, а затем React.createElement пыталась отобразить компонент AppointmentBooking, который также запускал действие, вызывающее ошибку диспетчера.

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

Это обычная проблема, и я подхожу к этому правильно? И если нет, то есть способ пойти на это?

Answer 1

Рекомендации по использованию Flux рекомендуют использовать компоненты «Контейнер», и я думаю, что это может решить вашу проблему. https://facebook.github.io/flux/docs/flux-utils.html#best-practices

Компонент «Контейнер» является фиктивным компонентом, единственной целью которого является облегчить связь с магазином. Отбрасывая эту ответственность за один компонент, вы сталкиваетесь с такими странными проблемами гонки.

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

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