this.ngRedux.dispatch 无法正常工作答案

【问题标题】：this.ngRedux.dispatch not working as it shouldthis.ngRedux.dispatch 无法正常工作
【发布时间】：2018-10-02 03:53:00
【问题描述】：

所以我是使用 redux 的新手，并且一直在尝试创建一个简单的计数器应用程序，该应用程序在单击按钮时递增，但我收到了以下错误消息：

node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(10,31) 中的错误：错误 TS2420：“NgRedux”类错误地实现了“ObservableStore”接口。属性“调度”的类型不兼容。 “Dispatch”类型不能分配给“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：类型“RootState”不满足约束“Action”。 src/app/app.component.ts(20,29): error TS2345: Argument of type '{ 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 });
  }
}

【问题讨论】：

那么，INCREMENT 是什么？ type 必须是 string
我在 action.ts 文件中定义了INCREMENT。这是文件的样子：export const INCREMENT = "INCREMENT"; 即使我将操作类型设置为“INCREMENT”，它仍然不起作用。

标签： angular redux

【解决方案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;

【讨论】：

【解决方案2】：

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

【讨论】：