Angular项目安装@angular-redux/store时依赖冲突问题求助

问题根源 #

@angular-redux/store@10.0.0的维护已停滞，仅支持Angular 7.x版本，与你当前使用的Angular 14.2.12存在严重的peer依赖冲突，强制安装会导致模块无法正常导入和运行，因此需要更换适配高版本Angular的Redux集成方案。

具体解决步骤 #

1. 卸载不兼容的包 #

先清理已安装的冲突依赖：

npm uninstall redux @angular-redux/store

2. 安装适配Angular 14的Redux集成库 #

使用Angular官方推荐的@ngrx/store（NgRx是Redux在Angular生态的官方实现，维护活跃，完美适配Angular 14）：

npm install @ngrx/store@14 @ngrx/store-devtools@14 --save

• 指定版本14是为了与你的Angular 14版本保持大版本一致，避免潜在兼容性问题
• @ngrx/store-devtools是可选调试工具，方便在Redux DevTools中查看状态变化

3. 配置NgRx Store #

3.1 创建状态与Reducer

在项目中创建store目录，添加以下文件：

counter.state.ts（定义状态结构和初始值）：

export interface CounterState {
  count: number;
}

export const initialCounterState: CounterState = {
  count: 0
};

counter.reducer.ts（处理状态更新逻辑）：

import { Action } from '@ngrx/store';
import { CounterState, initialCounterState } from './counter.state';

export function counterReducer(state: CounterState = initialCounterState, action: Action): CounterState {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

3.2 在AppModule中导入并配置Store

修改app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';

import { AppComponent } from './app.component';
import { counterReducer } from './store/counter.reducer';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 注册根Store，将counterReducer关联到counter状态节点
    StoreModule.forRoot({ counter: counterReducer }),
    // 配置调试工具，生产环境自动禁用
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: environment.production
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 在组件中使用Store #

修改app.component.ts：

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { CounterState } from './store/counter.state';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 订阅counter状态的变化
  count$ = this.store.select(state => state.counter.count);

  constructor(private store: Store<{ counter: CounterState }>) {}

  // 分发INCREMENT动作
  increment() {
    this.store.dispatch({ type: 'INCREMENT' });
  }

  // 分发DECREMENT动作
  decrement() {
    this.store.dispatch({ type: 'DECREMENT' });
  }
}

对应的app.component.html：

<h1>当前计数：{{ count$ | async }}</h1>
<button (click)="increment()">+1</button>
<button (click)="decrement()">-1</button>

验证运行 #

执行ng serve启动项目，点击按钮即可看到计数状态正常更新，Redux DevTools也能正常查看状态变化。

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