如何通过@ngrx/store获取State对象的当前值？

在使用@ngrx/store时，State对象的当前值可以通过Store类的select方法获取。以下是获取State对象当前值的步骤：

基础概念

@ngrx/store是Angular应用程序的状态管理库，基于Redux设计模式。它通过actions、reducers和selectors来管理应用程序的状态。

获取State对象的当前值

定义Reducer：首先，你需要定义一个reducer函数，该函数接收当前状态和一个action，并返回新的状态。

import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from './counter.actions';

export const initialState = { count: 0 };

const _counterReducer = createReducer(
  initialState,
  on(increment, state => ({ count: state.count + 1 })),
  on(decrement, state => ({ count: state.count - 1 }))
);

export function counterReducer(state, action) {
  return _counterReducer(state, action);
}

注册Reducer：在Angular模块中注册reducer。

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';

@NgModule({
  imports: [
    StoreModule.forRoot({ counter: counterReducer })
  ]
})
export class AppModule { }

获取State对象的当前值：在组件中使用Store的select方法获取State对象的当前值。

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

@Component({
  selector: 'app-counter',
  template: `
    <div>Count: {{ count$ | async }}</div>
    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
  `
})
export class CounterComponent {
  count$ = this.store.select(selectCounterState);

  constructor(private store: Store) {}

  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }
}

定义Selector（可选）：为了更好地组织代码，可以将获取状态的逻辑放在selector中。

import { createSelector } from '@ngrx/store';
import { AppState } from './app.state';

export const selectCounterState = (state: AppState) => state.counter;