Question

所以我不确定我是否完全理解connectToStores在我的搜索结果组件中正在做什么。我希望在我的商店发布更改时更新组件的状态，但它似乎只是更新组件的属性并更新包装SearchResultsConnector对象的状态。

我的问题是：

我不应该在这种情况下使用状态，如果是这样，为什么connectToStores有一个返回状态的回调？
状态何时从商店的emitChanges触发器更新？我是否必须复制构造函数中的内容？
我什么时候应该使用状态vs道具，并且应该存储更新状态？是否有一种特定的通量规则以单向方式支持变异状态？
为什么在我在dev-server中加载更改时状态会更新结果。我不明白这是否是正确的行为。
我是否应该在此处某处捕捉更新事件并以某种方式更新传入已更改属性的状态？

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;

Answer 1

connectToStores是一个函数，它返回一个更高阶的组件＆＃39;基于您提供的组件（您输入的SearchResults作为第一个参数）。

如果你看一下实现here（第44行，即storeConnector的render方法），它基本上将你提供的状态转移到返回对象的props。所以，是的，你应该从组件中的props中获取值，而不是状态。

如果您有兴趣知道我们为什么要使用更高阶的组件，您可以查看this article

如何使用connectToStores

1 个答案: