在Ngrx 9.x中,可以通过以下步骤来设置状态值:
@ngrx/store
提供的createReducer
函数来定义状态的初始值和处理不同action的状态更新逻辑。例如:import { createReducer, on } from '@ngrx/store';
import { setValue } from './actions';
export interface AppState {
value: string;
}
export const initialState: AppState = {
value: ''
};
export const appReducer = createReducer(
initialState,
on(setValue, (state, { value }) => ({ ...state, value }))
);
上述代码中,我们定义了一个AppState
接口来描述状态的结构,包含一个value
属性。然后,我们定义了初始状态initialState
,并使用createReducer
函数创建了一个reducer,它会根据setValue
action更新状态的value
属性。
setValue
action来设置状态的值:import { createAction, props } from '@ngrx/store';
export const setValue = createAction('[App] Set Value', props<{ value: string }>());
上述代码中,我们使用createAction
函数创建了一个名为setValue
的action,并使用props
函数定义了一个value
属性,用于传递新的状态值。
Store
服务来分发action并更新状态。首先,在组件中导入Store
服务和相关的actions:import { Store } from '@ngrx/store';
import { setValue } from './actions';
然后,在构造函数中注入Store
服务,并在需要设置状态值的地方调用dispatch
方法分发setValue
action:
constructor(private store: Store) {}
setValue(value: string) {
this.store.dispatch(setValue({ value }));
}
上述代码中,我们通过调用store.dispatch
方法分发setValue
action,并传递新的状态值。
select
方法来选择状态的特定属性。例如,在组件中导入select
函数和状态模块:import { select } from '@ngrx/store';
import { AppState } from './reducer';
然后,使用select
函数选择状态的value
属性,并订阅状态的变化:
value: string;
constructor(private store: Store) {
this.store.select((state: AppState) => state.value).subscribe(value => {
this.value = value;
});
}
上述代码中,我们使用select
函数选择状态的value
属性,并通过订阅状态的变化来更新组件中的value
属性。
这样,通过以上步骤,就可以在Ngrx 9.x中设置状态值了。
关于Ngrx的更多信息和使用方法,你可以参考腾讯云提供的Ngrx相关文档和产品介绍:
领取专属 10元无门槛券
手把手带您无忧上云