在Angular应用中使用ngrx管理状态,可以通过以下步骤在部分同步客户端状态中使用ngrx:
npm install @ngrx/store
// client.actions.ts
import { createAction, props } from '@ngrx/store';
export const setClientStatus = createAction('[Client] Set Status', props<{ status: string }>());
export const clearClientStatus = createAction('[Client] Clear Status');
// client.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { setClientStatus, clearClientStatus } from './client.actions';
export interface ClientState {
status: string;
}
export const initialState: ClientState = {
status: null
};
export const clientReducer = createReducer(
initialState,
on(setClientStatus, (state, { status }) => ({ ...state, status })),
on(clearClientStatus, state => ({ ...state, status: null }))
);
StoreModule.forRoot()
和StoreDevtoolsModule.instrument()
:// app.module.ts
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { clientReducer } from './client.reducer';
@NgModule({
imports: [
StoreModule.forRoot({ client: clientReducer }),
StoreDevtoolsModule.instrument()
],
// ...
})
export class AppModule { }
// client.component.ts
import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { setClientStatus, clearClientStatus } from './client.actions';
@Component({
// ...
})
export class ClientComponent implements OnInit {
status: string;
constructor(private store: Store<{ client: { status: string } }>) { }
ngOnInit() {
this.store.pipe(select('client')).subscribe(clientState => {
this.status = clientState.status;
});
}
updateStatus(status: string) {
this.store.dispatch(setClientStatus({ status }));
}
clearStatus() {
this.store.dispatch(clearClientStatus());
}
}
在上述代码中,我们首先导入了Store
和select
方法,用于获取和更新状态。在ngOnInit
中,我们订阅了client
状态的变化,并将其赋值给组件的status
属性。updateStatus
方法用于更新状态,它通过dispatch
方法派发了一个setClientStatus
的action,并传入了新的状态值。clearStatus
方法类似地派发了一个clearClientStatus
的action。
通过以上步骤,你就可以在部分同步的客户端状态中使用ngrx了。
上一篇:部分替换与sed命令
下一篇:部分图表缺少次要刻度