如何给ngrx reducer/ action一个值来设置状态？

在ngrx中，reducer和action是用来管理应用状态的重要概念。下面是如何给ngrx reducer/action一个值来设置状态的步骤：

1. 创建一个action：在ngrx中，action是一个简单的对象，用于描述应用中发生的事件。你可以使用createAction函数来创建一个action。例如，假设你要设置一个名为setValue的action，可以使用以下代码创建它：

import { createAction, props } from '@ngrx/store';

export const setValue = createAction(
  '[Your Feature] Set Value',
  props<{ value: any }>()
);

在上面的代码中，setValue是action的名称，props<{ value: any }>()定义了action的参数。

1. 创建一个reducer：reducer是一个纯函数，用于根据action的类型来更新应用的状态。你可以使用createReducer函数来创建一个reducer。例如，假设你要创建一个名为valueReducer的reducer，可以使用以下代码：

import { createReducer, on } from '@ngrx/store';
import { setValue } from './your-actions';

export const initialState = {
  value: null
};

export const valueReducer = createReducer(
  initialState,
  on(setValue, (state, { value }) => ({ ...state, value }))
);

在上面的代码中，initialState定义了初始状态，on(setValue, (state, { value }) => ({ ...state, value }))定义了当setValue action被触发时如何更新状态。

1. 在应用中使用reducer和action：要在应用中使用reducer和action，你需要将它们添加到ngrx的store中。在你的模块中，使用StoreModule.forRoot函数来配置ngrx store。例如：

import { StoreModule } from '@ngrx/store';
import { valueReducer } from './your-reducer';

@NgModule({
  imports: [
    StoreModule.forRoot({ value: valueReducer })
  ]
})
export class YourModule { }

在上面的代码中，valueReducer被添加到了ngrx store中，并且可以通过store.select来访问它。

1. 设置状态：要设置状态，你可以在组件中使用store.dispatch来分发一个action。例如，假设你的组件中有一个按钮，当点击按钮时，你想将状态设置为特定的值。你可以在组件的方法中使用以下代码来分发setValue action：

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { setValue } from './your-actions';

@Component({
  selector: 'your-component',
  template: `
    <button (click)="setValue()">Set Value</button>
  `
})
export class YourComponent {
  constructor(private store: Store) {}

  setValue() {
    const value = 'your value';
    this.store.dispatch(setValue({ value }));
  }
}

在上面的代码中，当按钮被点击时，setValue方法会分发setValue action，并传递一个值作为参数。

这样，当setValue action被分发时，ngrx会调用reducer来更新状态，从而实现状态的设置。

请注意，以上代码示例中的your-actions、your-reducer、your-component等名称是示例中的占位符，你需要根据你的实际应用进行相应的命名和组织。

关于ngrx的更多信息和使用方法，你可以参考腾讯云提供的ngrx相关文档和资源：

• ngrx官方文档
• 腾讯云ngrx相关产品和产品介绍链接地址