レンダリングされたコンポーネントをフラックスストアに入れることはできますか？

Question

反応起動ストラップモーダルコンポーネントに基づいてアプリケーション用の汎用モーダルコンポーネントを作成しようとしています。

目的は、ログイン/忘れてしまった/登録フォームのように、モードを再オープンせずにモーダルボディを交換する能力をアプリケーションに持たせることです。

私は

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 
     } 
    }) 
}; 

質問は、私は、フラックスに格納するレンダリングコンポーネント、またはフラックス店舗を置くことができているだけで、プレーンハッシュを維持する必要がありますか？

フラックスパターンで正しい方法はありますか？

このコンポーネントはどこでレンダリングすればよいですか？アクションクリエイターはこれに有効な場所ですか？

お読みになることをお勧めします。

Answer 1

お店は実際にはモデル固有のデータに限定されています。レンダリング機能でコンポーネントを保持しておき、ストアで設定されている変数に基づいてレンダリングする方法を選択することをお勧めします。以下のような何か：

export default class ModalComponent extends Component { 

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

    render() { 
     let modal; 

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

     return modal; 
    } 
} 

Answer 2

ストアのみコンポーネントの状態のために使用されています。あなたの場合、コンポーネント自体を保管して、反応フラックスのベストプラクティスを考慮しません。 Fluxは、イベントの送出とアクションの送出に基づいています。コンポーネントを動的に作成する場合は、イベントを送出します。