Могу ли я поместить обработанный компонент в хранилище потоков?

Я пытаюсь создать общий модальный компонент для своего приложения на основе модального компонента react-bootstrap.

Цель состоит в том, чтобы сделать его единственным в приложении, чтобы иметь возможность обмениваться модальным телом без повторного открытия мода, например, для форм входа/забывания-пароля/регистрации.

У меня есть модальный компонент в шаблоне потока с чем-то вроде

export default class ModalComponent extends Component {
    handleMyFluxStoreChange() {
        this.setState({
            modalBody : this.modalStore.getModalBody(),
            modalShow: this.modalStore.getModalToggle()
        });
    }

    render() {

        <Modal show={this.state.modalShow}>
            {this.state.body}
        </Modal>
    }
}

Это прекрасно работает со скалярами, но вопрос в следующем:

Как поместить в тело модального окна весь компонент?

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

export const showLoginModal = () => {

    let modalBody = (<LoginModal />);

    AppDispatcher.dispatch({
        type: MODAL_CHANGE,
        payload: {
            body: modalBody
        }
    })
};

Вопрос в том, могу ли я поместить визуализированный компонент в Store in flux, или хранилище Flux должно хранить только простые хэши?

Как правильно это сделать в потоке?

Где я должен отображать этот компонент? Является ли создатель действия подходящим местом для этого?

Любая рекомендация по чтению будет очень признательна.


reactjs react-bootstrap flux modal-dialog
person George Novik    schedule 18.01.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Ваш магазин действительно должен быть ограничен данными, специфичными для модели. Я бы рекомендовал оставить компонент в функции рендеринга, а затем выбрать способ его рендеринга на основе переменной, установленной в вашем магазине. Что-то типа:

export default class ModalComponent extends Component {

    handleMyFluxStoreChange() {
        this.setState({
            showLoginModal: this.modalStore.getLoginModalVisibility()
        });
    }

    render() {
        let modal;

        if (this.state.showLoginModal) {
           modal = <LoginModal />;
        }

        return modal;
    }
}
person Max Sindwani    schedule 18.01.2017
comment
Спасибо за ответ. При таком подходе мне придется обновлять модальный компонент для каждого нового компонента, который я хочу отобразить. Я ищу решение, чтобы сделать его прозрачным в этом аспекте. - person George Novik; 18.01.2017
comment
В этом случае я не могу придумать никакого другого решения, кроме того, что вы реализовали. - person Max Sindwani; 18.01.2017

arrow_upward
0
arrow_downward

Store используется только для состояния компонента. В вашем случае вы передаете сам компонент в хранилище, что не учитывает передовой опыт в реагирующем потоке. Flux основан на генерировании события и диспетчеризации. Создайте событие, если вы хотите создать компонент динамически.

person Khalid Azam    schedule 19.01.2017
comment
Спасибо. Где я должен обработать это событие и создать компонент, чтобы модальный компонент оставался прозрачным? - person George Novik; 19.01.2017