Angular(v5)中如何监听Redux状态变化及创建AppState监听器？

嘿，我来帮你搞定这个状态监听的需求！不管是要在全局头部组件里检测计数器变化，还是订阅整个AppState的更新，ng2-Redux都提供了很方便的方式，下面一步步给你讲清楚：

1. 用@select装饰器监听指定状态切片（推荐） #

ng2-Redux提供的@select装饰器是最符合Angular响应式风格的方式，它会帮你创建一个Observable，只监听你关心的那部分state变化，效率很高。

步骤： #

• 首先在你的头部组件中引入依赖：

  import { Component, OnInit, OnDestroy } from '@angular/core';
  import { Store, select } from 'ng2-redux';
  import { Subscription } from 'rxjs';
  import { AppState } from '../store/app.state'; // 导入你的AppState接口
  

• 使用@select装饰器选择计数器的状态：

  @select(state => state.counter) counter$; // $后缀是Observable的惯例命名
  private counterSubscription: Subscription;
  

• 在模板中直接用async管道显示（自动订阅/取消订阅，避免内存泄漏）：

  <header>
    <p>当前计数器值：{{ counter$ | async }}</p>
  </header>
  

• 如果需要在组件类内处理变化逻辑（比如计数器超过某个值时触发操作），可以在ngOnInit里手动订阅：

  ngOnInit() {
    this.counterSubscription = this.counter$.subscribe(newCounterValue => {
      console.log('计数器更新啦：', newCounterValue);
      if (newCounterValue > 10) {
        // 这里写你的自定义逻辑，比如提示用户
        alert('计数器超过10了！');
      }
    });
  }
  

• 记得在组件销毁时取消订阅（虽然用async管道不用，但手动订阅的话一定要做）：

  ngOnDestroy() {
    if (this.counterSubscription) {
      this.counterSubscription.unsubscribe();
    }
  }
  

2. 直接订阅整个Store状态 #

如果你需要监听整个AppState的变化（而不只是计数器），可以直接订阅store的subscribe方法：

ngOnInit() {
  this.store.subscribe(() => {
    const currentState = this.store.getState();
    const currentCounter = currentState.counter;
    // 这里可以访问整个AppState的所有属性，比如currentState.user、currentState.theme等
    console.log('整个AppState更新了，当前计数器：', currentCounter);
  });
}

⚠️ 注意：这种方式会在任何state变化时都触发回调，所以如果你的state很大，效率不如@select高，建议只在需要监听全局状态时使用。

3. 确保你的Redux配置正确 #

为了让上面的代码正常工作，你需要确保你的Reducer和Store配置没问题：

示例Reducer（处理计数器递增动作） #

// store/app.reducer.ts
import { Action } from 'redux';
import { INCREMENT } from '../actions/counter.actions';

export interface AppState {
  counter: number;
}

const initialState: AppState = {
  counter: 0
};

export function appReducer(state = initialState, action: Action) {
  switch (action.type) {
    case INCREMENT:
      return { ...state, counter: state.counter + 1 };
    default:
      return state;
  }
}

根模块配置Store #

// app.module.ts
import { NgReduxModule, NgRedux } from 'ng2-redux';
import { AppState } from './store/app.state';
import { appReducer } from './store/app.reducer';

@NgModule({
  imports: [
    // ...其他模块
    NgReduxModule
  ],
  // ...
})
export class AppModule {
  constructor(ngRedux: NgRedux<AppState>) {
    ngRedux.configureStore(appReducer, initialState);
  }
}

这样一来，当你在其他组件dispatchINCREMENT动作时，头部组件就能实时检测到计数器的变化啦！

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