所以我不确定我是否完全理解 connectToStores 在我的搜索结果组件中所做的事情。我希望在我的商店发出更改时更新组件的状态，但是它似乎只是在更新组件的属性并更新包装SearchResultsConnector对象的状态。
我的问题是：
在这种情况下我不应该使用状态吗，如果是这样，为什么 connectToStores 有一个返回状态的回调？
何时从 store 中的 emitChanges 触发器更新状态？我是否必须复制我在构造函数中所做的事情？
我什么时候应该使用 state vs props，并且应该存储更新状态？是否有特定的通量规则以单向方式改变状态？
当我在开发服务器中热加载更改时，为什么状态会更新到结果。我不明白这是否是正确的行为。
我是否应该在此处捕获更新事件并以某种方式使用传入的更改属性更新状态？
搜索结果.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;