Comments (11)
@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:
- I fixed some issues with http error handling.
- 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.
Related Issues (20)
- One More Time, Error: Actions must be plain objects. Use custom middleware for async actions
- Extend peer dependencies to Angular 7 HOT 2
- "NullInjectorError: No provider for NgZone" after upgrade to Angular 6 and angular-redux/store 9 HOT 2
- `window.devToolsExtension` is deprecated
- Storybook stories with @select HOT 2
- Metadata collected contains an error that will be reported at runtime: Lambda not supported.
- Request for articles/epics.md HOT 2
- Did you forget to configure your store? when running from a dist directory
- Select fires on unrelated store changes.
- Using @select decorator with @Input HOT 1
- Compiler Error when implementing Redux-Thunk Action
- @select decorator error: property has no initializer and is not definitely assigned in the constructor.
- Sharing common store between multiple modules ?
- Support for Angular 8? HOT 5
- installing angular-redux/store on angular 8.0.0 causes warning on missing peer dependencies (@angular/core@^7.0.0) HOT 2
- NgRedux<RootState> HOT 6
- Dispatch an action outside of ngZone HOT 1
- not understanding how to test subscription side effects HOT 1
- An unexpected error occurred: "https://registry.yarnpkg.com/@angular-redux%2fstore: read ETIMEDOUT" HOT 1
- Angular Version 12 is not supporting. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from store.