要解决Angular 2与NgRx的问题,可以按照以下步骤进行:
npm install -g @angular/cli
然后,使用以下命令创建一个新的Angular项目:
ng new my-project
npm install --save @ngrx/store
counter.actions.ts
的新文件,并添加以下内容:import { createAction, props } from '@ngrx/store';
export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');
export const reset = createAction('[Counter] Reset');
counter.reducer.ts
的新文件,并添加以下内容: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, () => initialState)
);
app.module.ts
文件,并添加以下内容:import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';
@NgModule({
imports: [
StoreModule.forRoot({ count: counterReducer })
],
// ...
})
export class AppModule { }
app.component.ts
文件,并添加以下内容:import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';
@Component({
selector: 'app-root',
template: `
Current Count: {{ count$ | async }}
`,
})
export class AppComponent {
count$ = this.store.pipe(select('count'));
constructor(private store: Store<{ count: number }>) {}
increment() {
this.store.dispatch(increment());
}
decrement() {
this.store.dispatch(decrement());
}
reset() {
this.store.dispatch(reset());
}
}
ng serve
这样,您就可以在浏览器中看到一个简单的计数器,并使用NgRx进行状态管理。点击按钮时,计数器的值会增加、减少或重置。