下面是一个使用Angular 6和@ngrx/store进行api调用的示例代码:
npm install @ngrx/store rxjs --save
api.actions.ts
的文件并定义一个action。import { createAction, props } from '@ngrx/store';
export const loadItems = createAction('[API] Load Items');
export const loadItemsSuccess = createAction('[API] Load Items Success', props<{ data: any }>());
export const loadItemsFailure = createAction('[API] Load Items Failure', props<{ error: any }>());
api.reducer.ts
的文件并定义一个reducer。import { createReducer, on } from '@ngrx/store';
import { loadItems, loadItemsSuccess, loadItemsFailure } from './api.actions';
export interface ApiState {
loading: boolean;
data: any;
error: any;
}
export const initialState: ApiState = {
loading: false,
data: null,
error: null
};
export const apiReducer = createReducer(
initialState,
on(loadItems, state => ({ ...state, loading: true })),
on(loadItemsSuccess, (state, { data }) => ({ ...state, loading: false, data })),
on(loadItemsFailure, (state, { error }) => ({ ...state, loading: false, error }))
);
api.effects.ts
的文件并定义一个effect。import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { map, mergeMap, catchError } from 'rxjs/operators';
import { ApiService } from './api.service';
import { loadItems, loadItemsSuccess, loadItemsFailure } from './api.actions';
@Injectable()
export class ApiEffects {
loadItems$ = createEffect(() =>
this.actions$.pipe(
ofType(loadItems),
mergeMap(() =>
this.apiService.getItems().pipe(
map(data => loadItemsSuccess({ data })),
catchError(error => of(loadItemsFailure({ error })))
)
)
)
);
constructor(private actions$: Actions, private apiService: ApiService) {}
}
api.service.ts
的文件并定义一个service。import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class ApiService {
constructor(private http: HttpClient) {}
getItems(): Observable {
return this.http.get('https://example.com/api/items');
}
}
StoreModule
和EffectsModule
。import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { apiReducer } from './api.reducer';
import { ApiEffects } from './api.effects';
@NgModule({
imports: [
StoreModule.forRoot({ api: apiReducer }),
EffectsModule.forRoot([ApiEffects])
],
// ...
})
export class AppModule {}
store.dispatch()
来分发action。import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { loadItems } from './api.actions';
@Component({
selector: 'app-root',
template: `
Loading...
{{ data | json }}
{{ error }}
`
})
export class AppComponent {
loading$ = this.store.select(state => state.api.loading);
data$ = this.store.select(state => state.api.data);
error$ = this.store.select(state => state.api.error);
constructor(private store: Store) {}
loadItems() {
this.store.dispatch(loadItems());
}
}
这是一个简单的示例,展示了如何在Angular 6中使用@ngrx/store和api调用。你可以根据你的需求对代码进行调整和扩展。