反応/フラックスアプリケーションの状態へのアクセスと設定

Question

私はフラックスの実装で反応するアプリケーションに取り組んでいます。

コンポーネントにバインドされたストアがあります。ctorデフォルトの（空白の）状態値を設定しました。 componentWillMount私は、ストアデータを更新するいくつかのアクションを実行して状態を移入します。 ストアは変更を発行し、コンポーネントはストアデータのビットをステートにすることによって変更を処理します。

私のrenderメソッドでは、レンダリングを状態データに依存させたいと思っています。

現在のところ私にはいくつかの問題があります。

1. 私render方法で私はthis.state.MyThing.APropertyような何かをした場合MyThingがまだ読み込まれていない場合、その後renderメソッドは早すぎると呼ばれています。これは、レンダリングで状態データを使用したい場所の多くに発生しているようです。これに対して賢明な警戒があるのですか、それとも私はこれを間違っていますか？

2. 私はストアを使用して変更を発行し、ストアからデータを取得し、それをコンポーネントのstateに設定することによってその変更を処理しています。ここで私の考えは、状態として設定すると、状態が変わったときにコンポーネントが再レンダリングすることがわかります。これは正しいです？または、emitハンドラ内のストアからデータを取得し、それを直接使用する必要がありますか？コンポーネント内のローカルvarに設定しますか？ 私が尋ねる理由は、setStateコールが即座に呼び出されず、設定した直後に状態を使いたいという問題が発生しているようです。これを念頭に置いて、私はそれが間違っているかもしれないようです。

いずれの考えも大変ありがとうございます。

Answer 1

レンダリングで条件文を使用すると、描画されていないデータを防ぐことができます。

<div> 
    {typeof this.state.myThing == 'object' ? 
    <strong>this.state.myThing.aProperty</strong> : 
    <span>Nothing to see here</span>} 
</div> 

あなたの2番目の質問に関しては、ええ。これは完全にうまくいっており、Fluxを使用するための期待された方法です。 Redux & Coからインスピレーションを得てhigher order components that map store state to propsとすることもできます。

function connect(store, mapStateToProps, Component) { 
    return React.createClass({ 
    getInitialState() { 
     const state = store.getState(); 
     return { state }; 
    }, 
    componentWillMount() { 
     store.listen(state => this.setState({ state })); 
    }, 
    render() { 
     const stateProps = mapStateToProps(this.state); 
     const passedProps = this.props; 
     const props = Object.assign({}, stateProps, passedProps); 
     return <Component {...props} />; 
    } 
    }); 
} 

このパターンは、あなたの元に伝承するために既存のコンポーネントを取り、店の変更は、その後、アウト小道具どの仕事にmapStateToProps機能を使用するたびに再レンダリングされますコンテナでそれをラップすることができます成分。

const MyStore = { ... }; 

const MyComponent = React.createClass(...); 

function mapStateToProps(state) { 
    return { foo: state.bar.foo }; 
} 

export default connect(MyStore, mapStateToProps, MyComponent); 

setStateそれは彼らがアップデートの多くをトリガする際に再描画を遅らせることからアプリケーションに反応保つためにバッチ処理される必要がある非同期メソッドです。 2番目の引数としてコールバックを渡すことによって、状態が確実に変化するのを確実に待つことができます。