我可以将渲染的组件放入通量存储中吗？

Question

我尝试基于 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>
    }
}

这适用于标量，但问题是：

我应该如何将整个组件放入模态体？

技术上这不是问题，我可以在 action creator 中这样做

export const showLoginModal = () => {

    let modalBody = (<LoginModal />);

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

问题是我可以将渲染的组件以 Flux 的形式放入 Store，还是 Flux Store 应该只保留普通哈希？

什么是通量模式的正确方法？

我应该在哪里渲染这个组件？动作创建者对此有效吗？

非常感谢任何阅读推荐。

Answer 1

Store 仅用于组件的状态。在您的情况下，您将组件本身传递给存储，这不考虑反应通量的最佳实践。 Flux 基于发出事件和调度动作。如果要动态创建组件，请发出事件。

Answer 2

您的商店确实应该仅限于特定于模型的数据。我建议将组件保留在渲染函数中，然后根据商店中设置的变量选择如何渲染它。比如：

export default class ModalComponent extends Component {

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

    render() {
        let modal;

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

        return modal;
    }
}