this.ngRedux.dispatch不能正常工作

Question

因此，我刚开始使用redux，并一直在尝试创建一个简单的计数器应用程序，它可以在单击按钮时递增，但我一直收到以下错误消息：

node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(10,31)：ERROR TS2420中的错误:类'NgRedux‘不正确地实现接口’观察站‘。属性“分派”的类型是不兼容的。输入“Dispatch”不能指定键入“Dispatch”。键入'RootState‘不能指定键入'AnyAction’。node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(37,33)：error TS2344:键入'RootState‘不满足约束’操作‘。node_modules/@angular-redux/store/lib/src/components/root-store.d.ts(18,24)：error TS2344:键入'RootState‘不满足约束’操作‘。src/app/app.component.ts(20,29)：error TS2345:类型'{ type: string；}‘的参数不能分配给'IAppState’类型的参数。对象文字只能指定已知的属性，类型'IAppState‘中不存在' type’。

这是我的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 });
  }
}

Answer 1

在您的package.json中使用下面的Redux版本，所有这些都应该可以工作：

"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/components/ng-redux.d.ts

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

调度重新定义：

abstract dispatch: Dispatch<RootState>;

至

abstract dispatch: Dispatch;

Answer 2

标记的答案和以下链接的组合解决了我的所有问题：https://github.com/angular-redux/store/pull/522