@reduxjs/Angular-Redux : enable to retrieve data initialize by a dispatched action when the...

I'm trying to use the new Redux implementation for Angular (@reduxjs/angular-redux). I am able to dispatch actions and update the store.

I am able to retrieve data from the store after a user's actions like a click.

I'am able to dispatch action when the component is mounted, in order to initialize data in the store, but I'm enabled to retrieve that initialized data from the injectSelector. It seems like the component did not detect that the update was updated and so did not re-render.

Basically, my state was updated and got the right data, but the component- does not re-render.

AppComponent.ts :

@Component({enter image description here
selector: 'app-root',
standalone: true,
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
count = injectAppSelector((state) => state.counter.value);
dispatch = injectAppDispatch();

constructor() {
this.dispatch(increment());
}

ngOnInit() {
this.dispatch(increment());
}
}


app.component.html:

<pre>{{ count() }}</pre>


package.json dependencies versions:

"dependencies": {
"@angular/animations": "^18.2.0",
"@angular/common": "^18.2.0",
"@angular/compiler": "^18.2.0",
"@angular/core": "^18.2.0",
"@angular/forms": "^18.2.0",
"@angular/platform-browser": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0",
"@reduxjs/angular-redux": "^1.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.10",
"@reduxjs/toolkit": "^2.2.7",
"redux": "^5.0.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.2.7",
"@angular/cli": "^18.2.7",
"@angular/compiler-cli": "^18.2.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.2.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.5.2"
}


I expect that when I connect the "count()" to the store through the injectAppSelector and when the store's state changes, the change is automatically detected because of the "OnPush" strategy and the view is updated.

If I run the app with the code above, I just land on the page with 0 even if the state contains 2 for it.

I don't know if I misunderstood something about how Angular re-render the view or if I missed something in this Redux implementation.

Continue reading...