0

そのため、検索結果コンポーネントで connectToStores が何をしているのかを完全に理解しているかどうかはわかりません。ストアが変更を発行したときにコンポーネントの状態が更新されることを期待していますが、コンポーネントのプロパティを更新し、ラッピングSearchResultsConnectorオブジェクトの状態を更新するだけのようです。

私の質問は次のとおりです。

  1. この場合、状態を使用することは想定されていません。もしそうなら、connectToStores に状態を返すコールバックがあるのはなぜですか?

  2. 状態はいつストアの emitChanges トリガーから更新されますか? コンストラクターで行ったことを複製する必要がありますか?

  3. いつ状態と小道具を使用する必要があり、更新状態をまったく保存する必要がありますか? 一方向の方法で変化状態を支持する特定のフラックスルールはありますか?

  4. 開発サーバーで変更をホットロードすると、状態が結果に更新されるのはなぜですか。それが正しい行動かどうかはわかりません。

  5. ここのどこかで更新イベントをキャッチし、受信した変更されたプロパティで状態を更新する必要がありますか?

SearchResults.js

import React from 'react';
import SearchStore from '../stores/SearchStore';
import Product from './Product';
import connectToStores from 'fluxible-addons-react/connectToStores'


class SearchResults extends React.Component {

    static contextTypes = {
        executeAction: React.PropTypes.func.isRequired,
        getStore: React.PropTypes.func.isRequired
    };
    static propTypes = {
        results: React.PropTypes.array
    };
    static defaultProps = {
        results:[]
    };
    constructor(props) {
        super(props);
        this.state = {results: props.results};
    }
    render() {

        let main;

        // I first used this.state.results, but this.state is null unless I hot load from the dev server on changes
        if (this.props && this.props.results && this.props.results.length) {

            let products = this.props.results.map(function (product) {
                return (
                    <Product
                        key={product.id}
                        imageUrl={product.image_url_large}
                        description={product.description}
                        name={product.name}
                        maxPrice={product.price_max}
                        minPrice={product.price_min}
                    />
                );
            }, this);

            main = (
                <section id="results">
                    <ul id="todo-list">
                        {products}
                    </ul>
                </section>
            );
        }

        return (
            <div>
                <header id="header">
                    <h1>Search Results</h1>
                </header>
                {main}
            </div>
        );
    }

}

SearchResults = connectToStores(SearchResults, [SearchStore], (context, props) => ({
    results: context.getStore('SearchStore').getResults()
}))


export default SearchResults;
4

1 に答える 1

0

SearchResultsconnectToStores は、提供したコンポーネント (最初のパラメーターとして入力したもの) に基づいて「高次コンポーネント」を返す関数です。

ここの実装(44 行目、storeConnector の render メソッド) を見ると、基本的には、返されたオブジェクトの props に提供した状態が転送されます。そうです、状態ではなく、レンダリングのためにコンポーネントの小道具から値を取得する必要があります。

高次コンポーネントを使用する必要がある理由を知りたい場合は、この記事をご覧ください。

于 2015-11-04T09:15:24.643 に答える