是的,可以使用以下命令在Angular 7上创建一个ngrx/Store的示例:
npm install @ngrx/store
mkdir store
cd store
mkdir counter
cd counter
// 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 interface CounterState {
count: number;
}
export const initialState: CounterState = {
count: 0
};
export const counterReducer = createReducer(
initialState,
on(increment, state => ({ ...state, count: state.count + 1 })),
on(decrement, state => ({ ...state, count: state.count - 1 })),
on(reset, state => ({ ...state, count: 0 }))
);
// index.ts
import { ActionReducerMap } from '@ngrx/store';
import { counterReducer, CounterState } from './counter.reducer';
export interface AppState {
counter: CounterState;
}
export const reducers: ActionReducerMap<AppState> = {
counter: counterReducer
};
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { increment, decrement, reset } from './store/counter/counter.actions';
import { Observable } from 'rxjs';
import { AppState } from './store';
@Component({
selector: 'app-root',
template: `
<div>
<button (click)="increment()">Increment</button>
<div>Current Count: {{ count$ | async }}</div>
<button (click)="decrement()">Decrement</button>
<button (click)="reset()">Reset</button>
</div>
`
})
export class AppComponent {
count$: Observable<number>;
constructor(private store: Store<AppState>) {
this.count$ = store.select(state => state.counter.count);
}
increment() {
this.store.dispatch(increment());
}
decrement() {
this.store.dispatch(decrement());
}
reset() {
this.store.dispatch(reset());
}
}
// app.module.ts
import { StoreModule } from '@ngrx/store';
import { reducers } from './store';
@NgModule({
imports: [
// other imports
StoreModule.forRoot(reducers)
],
// other configurations
})
export class AppModule { }
这样,您就创建了一个基于ngrx/store的计数器示例。您可以通过点击按钮来增加、减少和重置计数器的值,并通过异步管道(async pipe)在模板中显示当前计数器的值。
请注意,上述示例是为Angular 7创建的。在其他版本的Angular中,可能会有一些差异。此外,ngrx/store是用于状态管理的一种方式,可用于更复杂的应用程序和组件之间的状态共享。有关更多信息,请参阅腾讯云的ngrx/store相关文档和示例:
希望这能帮到您!如果您对其他内容有疑问,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云