this.ngRedux.dispatch 无法正常工作

Posted 2023-03-31

【中文标题】this.ngRedux.dispatch 无法正常工作

【英文标题】：this.ngRedux.dispatch not working as it should

【发布时间】：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”，它仍然不起作用。

【参考方案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