[addons-react] ConnectToStore called multiple time

[Wykks]

Following the doc : http://fluxible.io/addons/connectToStores.html
connectToStores is listening to the stores for updates. It should only listen to the array of store passed in arguments, no ?

Using the generator-fluxible code base, when I do something like this :

@connectToStores([ArticlesStore], (context, props) => {
    debug('ConnectToStore called');
    const articleStore = context.getStore(ArticlesStore);
    const slug = props.currentRoute.get('params').get('slug');
    return {
        article: articleStore.getSingleArticle(slug)
    };
})

connectToStores is called 3 times :
The expected one :

Dispatchr:Action executing handler for ArticlesStore
ConnectToStore called

And two others times afterwards :

Dispatchr:Action executing handler for RouteStore
ConnectToStore called
[...]
Dispatchr:Action executing handler for ApplicationStore
browser.js:112 Dispatchr:Action waiting on function StaticRouteStore() {
        RouteStore.apply(this, arguments);
    }
ConnectToStore called

Why RouteStore and ApplicationStore changes are firing this ConnectToStore ? Am I missing something here ?

Thanks ! :)

[mridgway]

Do you have store connections higher up in your component hierarchy? All updates will cascade from the top down unless you define shouldComponentUpdate somewhere.

[Wykks]

I see. The Application component does have a connectToStores.
So it means that every component added will behave like that (3 call to connectToStores) unless I define shouldComponentUpdate.
Is shouldComponentUpdate called before connectToStores ? How can I make it so it will only call connectToStores once in this context ?

[mridgway]

shouldComponentUpdate gets called after connectToStores since it happens after a setState call.

It looks like in your case it's a different connectToStores being called each time. Internally, fluxible-router is using connectToStores as well.

Each of the connectToStores should be called only once.

[Wykks]

Okay about shouldComponentUpdate :)
But about connectToStores being called only once, something is not right then. In my example, I used debug('ConnectToStore called'); to see when my connectToStores is called, we can clearly see that he's being called right after handler for RouteStore and handler for ApplicationStore.
I'm calling emitChange() only once, right after my route action is done.

[mridgway]

Yeah, that's odd then. Can you console.trace() to see where it's being called from?

[Wykks]

Actually, my connectToStores is called 4 times.

I start an action in the route config (simplified a bit here) :

article: {
    path: '/:slug',
    method: 'get',
    handler: require('../pages/Article'),
    action: function (context, payload, done) {
        const articleSlug = payload.get('params').get('slug');
        context.executeAction(retrieveArticle, { slug: articleSlug }, done);
    }

The action (again, simplified) :

export default function(context, payload, done) {
    context.service.read('article', payload, {}, (err, data) => {
        context.dispatch('RECEIVE_ARTICLE_SUCCESS', data);
        done();
    });
}

The store :

_handleGetArticleSuccess(data) {
    data.date = new Date(data.date);
    this.articles = this.articles.set(data.slug, Immutable.fromJS(data))
                                .sort(this._articleSort);
    this.emitChange();
}

I took these trace right after I switch to another route (/cupyou in this case) :

NavLink dispatchNavAction: action=NAVIGATE +3s undefined undefined Object {slug: "cupyou"}
Fluxible:Context Executing action navigateAction with payload +2ms Object {type: "click", url: "/cupyou", preserveScrollPosition: undefined, params: Object}
navigateAction dispatching NAVIGATE_START +3ms Object {type: "click", url: "/cupyou", preserveScrollPosition: undefined, params: Object}
Dispatchr:DispatcherContext dispatching NAVIGATE_START +1ms Object {type: "click", url: "/cupyou", preserveScrollPosition: undefined, params: Object}
Dispatchr:Action executing handler for RouteStore +0ms
orennesginal ConnectToStore [ArticlesStore] called  +11ms
console.trace() <-- TRACE 1
RoutingContainer component did update +19ms null Object {context: Object, currentNavigate: Object, currentNavigateError: null, isNavigateComplete: false, currentRoute: Object}
RoutingContainer on click navigation, reset scroll position to (0, 0) +2ms
Dispatchr:DispatcherContext finished NAVIGATE_START +1ms
navigateAction executing +0ms Object {type: "click", url: "/cupyou", preserveScrollPosition: undefined, params: Object}
navigateAction executing route action +0ms
Fluxible:Context Executing action navigateAction.action with payload +1ms Object {size: 10, _root: BitmapIndexedNode, __ownerID: undefined, __hash: undefined, __altered: false}
Fluxible:Context Executing action navigateAction. with payload +1ms Object {slug: "cupyou"}
FetchrClient Executing request article.read with params Object and body null +1ms
Fetcher:defaultConstructGetUri constructed get uri: +2ms /api/article;slug=cupyou
Dispatchr:DispatcherContext dispatching RECEIVE_ARTICLE_SUCCESS +904ms Object {ID: 1304, title: "Cupÿou", status: "publish", type: "post", author: Object…}
Dispatchr:Action executing handler for ArticlesStore +1ms
orennesginal ConnectToStore [ArticlesStore] called  +6ms
console.trace() <-- TRACE 2
Dispatchr:DispatcherContext finished RECEIVE_ARTICLE_SUCCESS +6ms
Dispatchr:DispatcherContext dispatching NAVIGATE_SUCCESS +9ms Object {size: 10, _root: BitmapIndexedNode, __ownerID: undefined, __hash: undefined, __altered: false}
Dispatchr:Action executing handler for RouteStore +2ms
orennesginal ConnectToStore [ArticlesStore] called  +8ms
console.trace() <-- TRACE 3
RoutingContainer component did update +8ms null Object {context: Object, currentNavigate: Object, currentNavigateError: null, isNavigateComplete: true, currentRoute: Object}
Dispatchr:Action executing handler for ApplicationStore +1ms
Dispatchr:Action waiting on function StaticRouteStore() {
        RouteStore.apply(this, arguments);
    } +1ms
orennesginal ConnectToStore [ArticlesStore] called  +14ms
console.trace() <-- TRACE 4
Dispatchr:DispatcherContext finished NAVIGATE_SUCCESS +8ms

TRACE 1

(anonymous function)    @   Article.js:93
React.createClass.getStateFromStores    @   connectToStores.js:36
(anonymous function)    @   makeAssimilatePrototype.js:15
getInitialState @   connectToStores.js:19
(anonymous function)    @   makeAssimilatePrototype.js:15
Constructor @   ReactClass.js:708
ReactCompositeComponentMixin.mountComponent @   ReactCompositeComponent.js:148
wrapper @   ReactPerf.js:66
ReactReconciler.mountComponent  @   ReactReconciler.js:37
ReactMultiChild.Mixin._mountChildByNameAtIndex  @   ReactMultiChild.js:474
ReactMultiChild.Mixin._updateChildren   @   ReactMultiChild.js:378
ReactMultiChild.Mixin.updateChildren    @   ReactMultiChild.js:326
ReactDOMComponent.Mixin._updateDOMChildren  @   ReactDOMComponent.js:869
ReactDOMComponent.Mixin.updateComponent @   ReactDOMComponent.js:701
ReactDOMComponent.Mixin.receiveComponent    @   ReactDOMComponent.js:646
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactChildReconciler.updateChildren @   ReactChildReconciler.js:84
ReactMultiChild.Mixin._reconcilerUpdateChildren @   ReactMultiChild.js:216
ReactMultiChild.Mixin._updateChildren   @   ReactMultiChild.js:351
ReactMultiChild.Mixin.updateChildren    @   ReactMultiChild.js:326
ReactDOMComponent.Mixin._updateDOMChildren  @   ReactDOMComponent.js:869
ReactDOMComponent.Mixin.updateComponent @   ReactDOMComponent.js:701
ReactDOMComponent.Mixin.receiveComponent    @   ReactDOMComponent.js:646
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.receiveComponent   @   ReactCompositeComponent.js:405
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.receiveComponent   @   ReactCompositeComponent.js:405
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.receiveComponent   @   ReactCompositeComponent.js:405
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.receiveComponent   @   ReactCompositeComponent.js:405
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.performUpdateIfNecessary   @   ReactCompositeComponent.js:421
ReactReconciler.performUpdateIfNecessary    @   ReactReconciler.js:102
runBatchedUpdates   @   ReactUpdates.js:129
Mixin.perform   @   Transaction.js:136
Mixin.perform   @   Transaction.js:136
assign.perform  @   ReactUpdates.js:86
flushBatchedUpdates @   ReactUpdates.js:147
wrapper @   ReactPerf.js:66
Mixin.closeAll  @   Transaction.js:202
Mixin.perform   @   Transaction.js:149
ReactDefaultBatchingStrategy.batchedUpdates @   ReactDefaultBatchingStrategy.js:62
enqueueUpdate   @   ReactUpdates.js:176
enqueueUpdate   @   ReactUpdateQueue.js:24
ReactUpdateQueue.enqueueSetState    @   ReactUpdateQueue.js:190
ReactComponent.setState @   ReactComponent.js:64
onStoreChange   @   connectToStores.js:40
emit    @   index.js:110
emitChange  @   BaseStore.js:72
createStore._handleNavigateStart    @   RouteStore.js:45
callHandler @   Action.js:67
handlersEach    @   Action.js:45
execute @   Action.js:44
dispatch    @   DispatcherContext.js:88
navigateAction  @   navigateAction.js:15
(anonymous function)    @   FluxibleContext.js:92
onNextTick  @   main.js:64
Item.run    @   browser.js:64
drainQueue  @   browser.js:34

TRACE 2

(anonymous function)    @   Article.js:93
React.createClass.getStateFromStores    @   connectToStores.js:36
(anonymous function)    @   makeAssimilatePrototype.js:15
onStoreChange   @   connectToStores.js:40
(anonymous function)    @   makeAssimilatePrototype.js:15
emit    @   index.js:89
emitChange  @   BaseStore.js:72
_handleGetArticleSuccess    @   ArticlesStore.js:67
callHandler @   Action.js:67
handlersEach    @   Action.js:45
execute @   Action.js:44
dispatch    @   DispatcherContext.js:88
(anonymous function)    @   retrieveArticle.js:21
onNextTick  @   main.js:62
Item.run    @   browser.js:64
drainQueue  @   browser.js:34

TRACE 3 (not exactly the same a 1)

(anonymous function)    @   Article.js:93
React.createClass.getStateFromStores    @   connectToStores.js:36
(anonymous function)    @   makeAssimilatePrototype.js:15
componentWillReceiveProps   @   connectToStores.js:32
(anonymous function)    @   makeAssimilatePrototype.js:15
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:458
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.receiveComponent   @   ReactCompositeComponent.js:405
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactChildReconciler.updateChildren @   ReactChildReconciler.js:84
ReactMultiChild.Mixin._reconcilerUpdateChildren @   ReactMultiChild.js:216
ReactMultiChild.Mixin._updateChildren   @   ReactMultiChild.js:351
ReactMultiChild.Mixin.updateChildren    @   ReactMultiChild.js:326
ReactDOMComponent.Mixin._updateDOMChildren  @   ReactDOMComponent.js:869
ReactDOMComponent.Mixin.updateComponent @   ReactDOMComponent.js:701
ReactDOMComponent.Mixin.receiveComponent    @   ReactDOMComponent.js:646
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactChildReconciler.updateChildren @   ReactChildReconciler.js:84
ReactMultiChild.Mixin._reconcilerUpdateChildren @   ReactMultiChild.js:216
ReactMultiChild.Mixin._updateChildren   @   ReactMultiChild.js:351
ReactMultiChild.Mixin.updateChildren    @   ReactMultiChild.js:326
ReactDOMComponent.Mixin._updateDOMChildren  @   ReactDOMComponent.js:869
ReactDOMComponent.Mixin.updateComponent @   ReactDOMComponent.js:701
ReactDOMComponent.Mixin.receiveComponent    @   ReactDOMComponent.js:646
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.receiveComponent   @   ReactCompositeComponent.js:405
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.receiveComponent   @   ReactCompositeComponent.js:405
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.receiveComponent   @   ReactCompositeComponent.js:405
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.receiveComponent   @   ReactCompositeComponent.js:405
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.performUpdateIfNecessary   @   ReactCompositeComponent.js:421
ReactReconciler.performUpdateIfNecessary    @   ReactReconciler.js:102
runBatchedUpdates   @   ReactUpdates.js:129
Mixin.perform   @   Transaction.js:136
Mixin.perform   @   Transaction.js:136
assign.perform  @   ReactUpdates.js:86
flushBatchedUpdates @   ReactUpdates.js:147
wrapper @   ReactPerf.js:66
Mixin.closeAll  @   Transaction.js:202
Mixin.perform   @   Transaction.js:149
ReactDefaultBatchingStrategy.batchedUpdates @   ReactDefaultBatchingStrategy.js:62
enqueueUpdate   @   ReactUpdates.js:176
enqueueUpdate   @   ReactUpdateQueue.js:24
ReactUpdateQueue.enqueueSetState    @   ReactUpdateQueue.js:190
ReactComponent.setState @   ReactComponent.js:64
onStoreChange   @   connectToStores.js:40
emit    @   index.js:110
emitChange  @   BaseStore.js:72
createStore._handleNavigateSuccess  @   RouteStore.js:49
callHandler @   Action.js:67
handlersEach    @   Action.js:45
execute @   Action.js:44
dispatch    @   DispatcherContext.js:88
(anonymous function)    @   navigateAction.js:60
onNextTick  @   main.js:62
Item.run    @   browser.js:64
drainQueue  @   browser.js:34

TRACE 4 (again a bit different)

(anonymous function)    @   Article.js:93
React.createClass.getStateFromStores    @   connectToStores.js:36
(anonymous function)    @   makeAssimilatePrototype.js:15
componentWillReceiveProps   @   connectToStores.js:32
(anonymous function)    @   makeAssimilatePrototype.js:15
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:458
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.receiveComponent   @   ReactCompositeComponent.js:405
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactChildReconciler.updateChildren @   ReactChildReconciler.js:84
ReactMultiChild.Mixin._reconcilerUpdateChildren @   ReactMultiChild.js:216
ReactMultiChild.Mixin._updateChildren   @   ReactMultiChild.js:351
ReactMultiChild.Mixin.updateChildren    @   ReactMultiChild.js:326
ReactDOMComponent.Mixin._updateDOMChildren  @   ReactDOMComponent.js:869
ReactDOMComponent.Mixin.updateComponent @   ReactDOMComponent.js:701
ReactDOMComponent.Mixin.receiveComponent    @   ReactDOMComponent.js:646
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactChildReconciler.updateChildren @   ReactChildReconciler.js:84
ReactMultiChild.Mixin._reconcilerUpdateChildren @   ReactMultiChild.js:216
ReactMultiChild.Mixin._updateChildren   @   ReactMultiChild.js:351
ReactMultiChild.Mixin.updateChildren    @   ReactMultiChild.js:326
ReactDOMComponent.Mixin._updateDOMChildren  @   ReactDOMComponent.js:869
ReactDOMComponent.Mixin.updateComponent @   ReactDOMComponent.js:701
ReactDOMComponent.Mixin.receiveComponent    @   ReactDOMComponent.js:646
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.receiveComponent   @   ReactCompositeComponent.js:405
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
wrapper @   ReactPerf.js:66
ReactCompositeComponentMixin.performUpdateIfNecessary   @   ReactCompositeComponent.js:421
ReactReconciler.performUpdateIfNecessary    @   ReactReconciler.js:102
runBatchedUpdates   @   ReactUpdates.js:129
Mixin.perform   @   Transaction.js:136
Mixin.perform   @   Transaction.js:136
assign.perform  @   ReactUpdates.js:86
flushBatchedUpdates @   ReactUpdates.js:147
wrapper @   ReactPerf.js:66
Mixin.closeAll  @   Transaction.js:202
Mixin.perform   @   Transaction.js:149
ReactDefaultBatchingStrategy.batchedUpdates @   ReactDefaultBatchingStrategy.js:62
enqueueUpdate   @   ReactUpdates.js:176
enqueueUpdate   @   ReactUpdateQueue.js:24
ReactUpdateQueue.enqueueSetState    @   ReactUpdateQueue.js:190
ReactComponent.setState @   ReactComponent.js:64
onStoreChange   @   connectToStores.js:40
emit    @   index.js:89
emitChange  @   BaseStore.js:72
(anonymous function)    @   ApplicationStore.js:45
waitFor @   Action.js:96
waitFor @   DispatcherContext.js:150
handlePageTitle @   ApplicationStore.js:42
callHandler @   Action.js:67
handlersEach    @   Action.js:45
execute @   Action.js:44
dispatch    @   DispatcherContext.js:88
(anonymous function)    @   navigateAction.js:60
onNextTick  @   main.js:62
Item.run    @   browser.js:64
drainQueue  @   browser.js:34

Sorry for the bad readability... And thank you for your time ! :)

[mridgway]

So it looks like this is the flow:

1. RouteStore.NAVIGATE_START causes new component to render and calls getInitialState
2. ArticleStore. RECEIVE_ARTICLE_SUCCESS triggers change event
3. RouteStore.NAVIGATE_SUCCESS triggers componentWillReceiveProps from parent being updated
4. ApplicationStore.NAVIGATE_SUCCESS triggers a second componentWillReceiveProps from parent being updated

So it seems like componentWillReceiveProps causing state changes is the biggest culprit here. In theory, the state could be based on props which would require that we run this hook, but it could be optimized to not call connectToStores if the state is not based on any props.

Perhaps we can provide an option to flag certain props as influential to state or a hook to return before calling connectToStores that takes in props: shouldUpdateState(props).

[Wykks]

(Comment edited)
Actually the first one is expected too, because it's the initialState and can be useful sometimes. The "extra" calls are 3 and 4.

[pablolmiranda]

ConnectToStores encapsulates all the logic of binding with the stores, it is a central point for this logic. In this case, why not change the connectToStores to bind with the Dispatcher and change the Dispatcher logic to only trigger one change per action dispatched? Is it possible?

[Wykks]

In theory, the state could be based on props which would require that we run this hook, but it could be optimized to not call connectToStores if the state is not based on any props.

In which case you would base the state on props ? I never used the props arg from getStateFromStores.

@pablolmiranda connectToStore listen to emitChange called from the store, which already trigger one change. The store must be the one triggering connectToStore, after the changes are actually made in the store. The dispatcher isn't aware of that.

[mridgway]

In some cases you may fetch data from your store based on the props that were passed in to a component.

For example, an ArticleComponent that takes in an identifier for which article to display. It could call ArticleStore.getArticle(id) to get the correct data. If the props change in this case, you would want to make sure that the state of the component changes to the new article.

It's probably more often that you wouldn't want this, so maybe we should optimize for that path first and provide a way to trigger changes based on props. This would potentially break compatibility though.

[Wykks]

Oh my... Sorry I'm tired, I should think more before writing anything.. I'm actually using that exact props param in my first post..... (I was getting the id directly from the store, before doing this).
shouldUpdateState seems to be a good way to solve that then, in order to not call connectToStore when NAVIGATE_SUCCESS is fired. Or just handle this special case directly in fluxible-router ?

[mridgway]

I think #324 could be relevant here as a way of batching these changes together.

[itssumitrai]

I am facing the same issue of connectToStores called multiple times for no reason. It seems to batch multiple events, when I need them to be dispatched instantaneously. For eg: a loading state.
And then the callback for connectToStore gets called multiple times even after that batching. I think there is some bug in connectToStores.