[SOLVED] Enable to retrieve data initialize by a dispatched action when the component is mounted

Enable to retrieve data initialize by a dispatched action when the component is mounted

I'm trying to use the new Redux implementation for Angular (@reduxjs/angular-redux). I followed the getting start and the TypeScript guide of the documentation.

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 state change and so did not re-render.

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

Screenshot of what I have

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.

Solution

Maintainer of Angular Redux here!

This was a bug we had in v1.0.0, which was now fixed in v1.0.1 per your report.

Try it out and let us know what you think - thanks!

https://github.com/reduxjs/angular-redux/releases/tag/v1.0.1