要在Angular中保存嵌套数组的GET响应到ngrx store中,你可以按照以下步骤进行操作:
data.module.ts
,用于存储你的数据。// data.module.ts
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { dataReducer } from './data.reducer';
@NgModule({
imports: [
StoreModule.forFeature('data', dataReducer)
]
})
export class DataModule { }
data.reducer.ts
,用于处理数据的状态更新。// data.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { setData } from './data.actions';
export interface DataState {
nestedArray: any[]; // 你的嵌套数组的类型
}
export const initialState: DataState = {
nestedArray: []
};
export const dataReducer = createReducer(
initialState,
on(setData, (state, { nestedArray }) => ({ ...state, nestedArray }))
);
data.actions.ts
,用于定义actions。// data.actions.ts
import { createAction, props } from '@ngrx/store';
export const setData = createAction('[Data] Set Data', props<{ nestedArray: any[] }>());
HttpClient
来获取GET响应,并将其保存到ngrx store中。import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { setData } from './data.actions';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
constructor(private http: HttpClient, private store: Store) { }
ngOnInit(): void {
this.getData().subscribe((response: any) => {
this.store.dispatch(setData({ nestedArray: response.nestedArray }));
});
}
getData(): Observable {
return this.http.get('your-api-url');
}
}
现在,当你的组件初始化时,它将使用HttpClient
从API中获取GET响应,并将其通过setData
action保存到ngrx store中。你可以在其他组件中订阅data
状态,以获取更新后的嵌套数组数据。