This.ngRedux.dispatch не работает так, как должно

Abubakar Ibrahim спросил: 28 марта 2018 в 03:51 в: angular

, поэтому я новичок в использовании reducex и пытаюсь создать простое приложение-счетчик, которое увеличивается при нажатии кнопки, но я получаю это сообщение об ошибке:

ОШИБКА в node_modules / @ угловом -redux / store / lib / src / components / ng-redux.d.ts (10,31): ошибка TS2420: класс "NgRedux" неправильно реализует интерфейс "ObservableStore". Типы свойств "отправка" несовместимы. Тип "Отправка" 'не присваивается типу "Dispatch". Тип "RootState" не присваивается типу "AnyAction" .node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts (37,33) : ошибка TS2344: Тип "RootState" не удовлетворяет ограничению "Action'.node_modules/@angular-redux/store/lib/src/components/root-store.d.ts (18,24): ошибка TS2344: Type ' RootState 'не удовлетворяет ограничениям Action'.src / app / app.component.ts (20,29): ошибка TS2345: аргумент типа' {type: string; } 'не присваивается параметру типа "IAppState". Литерал объекта может указывать только известные свойства, а "type" не существует в типе "IAppState".

Это файл app.components.ts `

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
}
}
`

Это мой файл store.ts:

    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;
}

И это мой файл app.module.ts:

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 });
  }
}


2 ответа

Есть решение
Adrian Farmadin ответил: 24 апреля 2018 в 01:35

Используйте следующую версию Redux в своем package.json, и все должно работать:

"redux": "^3.6.0"

Возможно, вы используете "redux": "^4.0.0". В этой версии изменилось определение интерфейса Dispatch. От (^ 3.6.0):

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

до (^ 4.0.0):

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

Пакет "@angular-redux/store": "^7.1.1" пока не поддерживает "redux": "^4.0.0". Если вы хотите использовать "redux": "^4.0.0", вы можете отредактировать определение dispatch в следующих файлах:

node_modules / @ angular-redux / store / lib / SRC / компоненты / нг-redux.d.ts

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

Переопределение отправки:

abstract dispatch: Dispatch<RootState>;

до

abstract dispatch: Dispatch;
Abubakar Ibrahim ответил: 26 апреля 2018 в 02:22

Сочетание отмеченного ответа и следующей ссылки решило все мои проблемы: https://github.com/angular-redux/store/pull/522