Facebook Flux调度器
explicitly prohibits ActionCreators from dispatching other ActionCreators.这个限制可能是一个好主意,因为它阻止您的应用程序创建事件链.
只要您具有包含彼此依赖的异步ActionCreators数据的商店,这将成为一个问题.如果CategoryProductsStore依赖于CategoryStore,则在不采取推迟后续操作的情况下,似乎没有办法避免事件链.
情景1：
包含类别中的产品列表的商店需要知道从哪个类别ID获取产品.
var CategoryProductActions = {
get: function(categoryId) {
Dispatcher.handleViewAction({
type: ActionTypes.LOAD_CATEGORY_PRODUCTS,categoryId: categoryId
})
ProductAPIUtils
.getByCategoryId(categoryId)
.then(CategoryProductActions.getComplete)
},getComplete: function(products) {
Dispatcher.handleServerAction({
type: ActionTypes.LOAD_CATEGORY_PRODUCTS_COMPLETE,products: products
})
}
}
CategoryStore.dispatchToken = Dispatcher.register(function(payload) {
var action = payload.action
switch (action.type) {
case ActionTypes.LOAD_CATEGORIES_COMPLETE:
var category = action.categories[0]
// Attempt to asynchronously fetch products in the given category,this causes an invariant to be thrown.
CategoryProductActions.get(category.id)
...
情景2：
另一种情况是由于存储更改的结果安装了子组件,并且其组件为WillMount / componentWillReceiveProps attempts to fetch data via an asynchronous ActionCreator：
var Categories = React.createClass({
componentWillMount() {
CategoryStore.addChangeListener(this.onStoreChange)
},onStoreChange: function() {
this.setState({
category: CategoryStore.getCurrent()
})
},render: function() {
var category = this.state.category
if (category) {
var products = <CategoryProducts categoryId={category.id} />
}
return (
<div>
{products}
</div>
)
}
})
var CategoryProducts = React.createClass({
componentWillMount: function() {
if (!CategoryProductStore.contains(this.props.categoryId)) {
// Attempt to asynchronously fetch products in the given category,this causes an invariant to be thrown.
CategoryProductActions.get(this.props.categoryId)
}
}
})
有没有办法避免这种情况呢？
