Angular Redux中this.ngRedux.dispatch异常及TS2420错误求助

Hey there! Let's work through this Redux counter issue you're stuck on. That type error with NgRedux and dispatch typically comes from either mismatched package versions between Angular, Redux, and @angular-redux/store, or mixed-up type definitions for your state and actions. Here's a step-by-step fix:

1. First, Check Package Version Compatibility #

This type mismatch often pops up when your @angular-redux/store version doesn't align with your Angular or Redux versions. For example:

• Angular 12+ requires @angular-redux/store v12+
• Angular 11 needs v11, and so on

Verify your package.json and update if needed:

# Uninstall the current version
npm uninstall @angular-redux/store
# Install the version matching your Angular release (replace 12 with your Angular version)
npm install @angular-redux/store@12 --save

2. Fix Your State & Action Type Definitions #

The error mentions RootState isn't assignable to AnyAction—this means your type setup is mixed up. Let's clean that up:

a. Define Action Types & Interfaces #

Create an actions.ts file to standardize your counter actions:

// actions.ts
export const INCREMENT = '[Counter] Increment';

// Define the structure of your increment action
export interface IncrementAction {
  type: typeof INCREMENT;
}

// Union type for all counter-related actions
export type CounterActions = IncrementAction;

b. Define Your Root State Interface #

Create a state.ts file to outline your app's root state shape:

// state.ts
export interface RootState {
  counter: number;
}

3. Correct NgRedux Initialization & Dispatch Usage #

Make sure you're setting up NgRedux properly and dispatching the right action objects.

a. Root Module Setup #

In app.module.ts, initialize NgRedux with your root state and reducer:

import { NgModule } from '@angular/core';
import { NgRedux, NgReduxModule } from '@angular-redux/store';
import { RootState } from './state';
import { counterReducer } from './reducers';

@NgModule({
  imports: [NgReduxModule],
  // ... other imports/providers
})
export class AppModule {
  constructor(ngRedux: NgRedux<RootState>) {
    ngRedux.configureStore(
      counterReducer,
      { counter: 0 } // Set your initial state here
    );
  }
}

b. Build Your Counter Reducer #

Create reducers.ts to handle state updates:

// reducers.ts
import { RootState } from './state';
import { CounterActions, INCREMENT } from './actions';

export function counterReducer(state: RootState, action: CounterActions): RootState {
  switch (action.type) {
    case INCREMENT:
      return { ...state, counter: state.counter + 1 };
    default:
      return state;
  }
}

c. Dispatch Actions Correctly in Your Component #

Update your counter component to dispatch the properly typed action:

import { Component } from '@angular/core';
import { NgRedux } from '@angular-redux/store';
import { RootState } from './state';
import { INCREMENT } from './actions';

@Component({
  selector: 'app-counter',
  template: `<button (click)="increment()">Increment</button> <p>Count: {{ count$ | async }}</p>`
})
export class CounterComponent {
  // Subscribe to the counter state using select
  count$ = this.ngRedux.select(state => state.counter);

  constructor(private ngRedux: NgRedux<RootState>) {}

  increment() {
    // Dispatch the correctly structured action
    this.ngRedux.dispatch({ type: INCREMENT });
  }
}

4. Tweak TypeScript Compiler Options (If Needed) #

Ensure your tsconfig.json has settings that play nice with Redux types:

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true // Temporarily bypasses type mismatches in library definitions if needed
  }
}

If you still see errors after these steps, try clearing your dependencies and reinstalling:

rm -rf node_modules package-lock.json
npm install

That should resolve the type mismatch and get your dispatch function working properly. Let me know if you hit any snags!

内容的提问来源于stack exchange，提问作者Abubakar Ibrahim