NgRx是一个用于管理Angular应用程序状态的库,它基于Redux模式。Redux是一个用于JavaScript应用程序的状态管理库,它帮助开发者管理应用程序的状态和数据流。

NgRx包含了几个核心概念:

  1. Store: NgRx应用中的唯一数据源,保存了整个应用的状态。开发者可以在Store中保存任意数据,并通过Selectors访问和获取这些数据。

  2. Action: 描述对应用状态的变化的纯Javascript对象。Action必须包含一个类型(type)属性来描述它的类型,并可能包含一些其他属性来传递数据。

  3. Reducer: 一个纯函数,根据先前的状态和一个Action来计算一个新的状态。Reducer函数接收当前状态(state)和一个Action,返回一个新的状态。

  4. Effect: 用于处理副作用的函数。Effect可以监听Actions,执行一些异步操作(如HTTP请求),并发出新的Actions来更新状态。

  5. Selector: 用于从Store中获取数据的函数。Selector可以对数据进行转换、筛选和组合,以便提供给组件使用。

下面是一个简单的NgRx应用程序的示例:

  1. 创建一个Actions文件,定义一些Action类型和Action创建函数:
import { createAction, props } from '@ngrx/store';

export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
export const reset = createAction('[Counter Component] Reset');
  1. 创建一个Reducer函数来处理这些Action:
import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';

export const initialState = 0;

export const counterReducer = createReducer(
  initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1),
  on(reset, state => 0)
);
  1. 创建一个NgRx Store,并将Reducer注册到Store中:
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';

@NgModule({
  imports: [
    StoreModule.forRoot({ count: counterReducer })
  ]
})
export class AppModule { }
  1. 在组件中使用NgRx Store:
import { Store } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';

export class CounterComponent {
  count$ = this.store.select('count');

  constructor(private store: Store<{ count: number }>) { }

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

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

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

这只是一个简单的NgRx示例,你可以根据具体需求扩展和优化应用程序。希望这个简介对你有帮助!