Subscriptions not firing about store HOT 11 CLOSED

@nareshbhatia I'll take a look into this when I get the chance, thanks for providing the repo/implementation - it will help debug the issue.

from store.

I am seeing that the counter example has code to trigger change detection whenever the store changes:

this.unsubscribe = this.ngRedux.subscribe(() => {
  this.applicationRef.tick();
});

I don't understand the need for this because the same function has code that subscribes to the change in counter state which eventually updates the counter input in the Counter component:

this.counter$ = this.ngRedux
    .select(state => state.counter)

This should automatically trigger change detection, so there should be no need to trigger it manually.

In any case, I added a ngRedux.subscribe() call to my code in order to replicate the counter example. While I still don't see my select() subscriptions firing, I do see this ngRedux subscription firing whenever the store changes. That doesn't help me though because it's not easy to figure out what in the store changed.

from store.

Thanks, @e-schultz. Also, please feel free to provide comments/feedback on my approach.

from store.

@nareshbhatia taking a quick look into things. You're right - in the ngRedux.subscribe(()=>) - there shouldn't be a need for the developer to have to worry about applicationRef.tick() - I'll try and look into the cause of that.

For the other issues - the structure of your AppState is incorrect, when using combineReducers, the name of the reducer becomes a key in the state.

Your AppState should actually be:

import { Repo } from '../models/repo.model';

export class AppState {
    githubReducer: {
        orgName: string;
        errorMessage: string;
        repos: Repo[];
    }
}



export const initialState: AppState = {
    githubReducer: {
        orgName: null,
        errorMessage: null,
        repos:[]
    }
};

Then in your .select statements, you would have

 this.orgNameSubscription = this.ngRedux
            .select<string>(state =>  state.githubReducer.orgName)     
// instead of 
 this.orgNameSubscription = this.ngRedux
            .select<string>(state =>  state.orgName)     

Submitted a PR against your repo showing the fixes - although will still need to check into the .subscribe needing an appref.tick()

from store.

@e-schultz - thanks so much for your help. I merged in your PR.

It doesn't look like applicationRef.tick() is really needed. I took it out and everything is working fine. I addition:

1. I fixed some issues with http error handling.
2. I now provide the initialState to the createStore() call. This prevents store subscribers receiving undefined values in the beginning.

Looks like the app is good to go as another example for ng2-redux!

Thanks again for your help.

from store.

@e-schultz @nareshbhatia the ApplicationRef.tick() is needed for redux devtools to work - changes to the store from redux devtools are made outside the angular zone.

Perhaps we can change the code to only turn it on if window.devToolsExtension is truthy.

from store.

@SethDavenport, thanks for the clarification. FYI, I did not play with devToolsExtension because I was getting some kind of an error from TypeScript. Now that everything else is working, may be I will give it a shot.

Also to note, I hacked index.html as follows to work around Redux's need to have a global variable called process:

process = {
    env: {
        NODE_ENV: 'development'
    }
}

I think the counter example includes other dependences to keep Redux happy, whereas I decided to keep the number of dependencies to a minimum. In fact, I see that the counter example depends on React - any idea why?

from store.

@nareshbhatia the process thing is likely related to #105 which should be fixed in the next patch release.

As for the react dependency in the example app, I believe this is left over from when we brought in the dev tools directly instead of using the Chrome extension. I'll remove it.

Finally, coming back to the appref.tick() - this will no longer be needed even for devtools in the upcoming 3.0 - we handle it internally.

from store.

Awesome! Thanks for the update.

from store.

I just created a more ambitious project with ng2-redux: https://github.com/sapientglobalmarkets/staffer. Also used angular-cli and angular-material2 to show how all these play well together. Would you like to link to this project in your README? It will be a great help for people ramping up on ng2-redux. As always, feedback and PRs welcome!

from store.

I'm not sure whether or not you've posted details in the documentation about how to structure the state when using the combineReducers function. If that is not accounted for it would be good to include that in an obvious way in usage examples. I stumbled on this article to solve a similar issue. We found it best to structure the app similar to what @nareshbhatia was doing. The reducer as the key was the fundamental piece we missed.

from store.