this.ngRedux.dispatch not working as it should

Question

so I am new to using redux and have been trying to create a simple counter app that increments on click of a button but I've been getting this error message:

ERROR in node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(10,31): error TS2420: Class 'NgRedux' incorrectly implements interface 'ObservableStore'. Types of property 'dispatch' are incompatible. Type 'Dispatch' is not assignable to type 'Dispatch'. Type 'RootState' is not assignable to type 'AnyAction'. node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(37,33): error TS2344: Type 'RootState' does not satisfy the constraint 'Action'. node_modules/@angular-redux/store/lib/src/components/root-store.d.ts(18,24): error TS2344: Type 'RootState' does not satisfy the constraint 'Action'. src/app/app.component.ts(20,29): error TS2345: Argument of type '{ type: string; }' is not assignable to parameter of type 'IAppState'. Object literal may only specify known properties, and 'type' does not exist in type 'IAppState'.

This is my app.components.ts file `

import { Component } from '@angular/core';
import { NgRedux, select } from '@angular-redux/store';
import { IAppState } from './store';
import { INCREMENT } from './actions';
import { Observable } from 'rxjs';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  counter = 0;
  constructor(
    public ngRedux: NgRedux<IAppState>
  ){

  }
  increment(){
    this.ngRedux.dispatch({ type: INCREMENT });
    //This is specifically where I get the error. type: INCREMENT is underlined with a red squiggly line
}
}
`

This is my store.ts file:

    import { INCREMENT } from './actions';

export interface IAppState {
counter: number;
}
export function rootReducer(state: IAppState, action): IAppState{
switch (action.type){
    case INCREMENT: return { counter: state.counter + 1 };
}
    return state;
}

And this is my app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgRedux, NgReduxModule } from '@angular-redux/store';


import { AppComponent } from './app.component';
import { IAppState, rootReducer } from './store';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgReduxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 

  constructor(private ngRedux: NgRedux<IAppState>){
      this.ngRedux.configureStore(rootReducer, { counter: 0 });
  }
}

I defined INCREMENT in an action.ts file. This is how the file looks like: export const INCREMENT = "INCREMENT"; Even when I set type of action as "INCREMENT", it still didn't work. — Abubakar Ibrahim

Adrian Farmadin Adrian Farmadin · Accepted Answer · 2018-05-18T15:15:29

Use following version of Redux in your package.json and all should work:

"redux": "^3.6.0"

Your are probably using "redux": "^4.0.0". In this version the definition of Dispatch interface changed. From (^3.6.0):

export interface Dispatch<S> {
    <A extends Action>(action: A): A;
}

To (^4.0.0):

export interface Dispatch<A extends Action = AnyAction> {
  <T extends A>(action: T): T;
}

The "@angular-redux/store": "^7.1.1" package doesn't support "redux": "^4.0.0" yet. If you wish to use "redux": "^4.0.0" you muss edit the definition of dispatch in following files:

node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts

node_modules/@angular-redux/store/lib/src/components/root-store.d.ts

Dispatch redefinition:

abstract dispatch: Dispatch<RootState>;

to

abstract dispatch: Dispatch;

this.ngRedux.dispatch not working as it should

2 Answers