从服务器获取ngrx async数据

Question

如何从服务器中获取异步数据？

我想将数据存储在Global Store中以进行

更新

以后

的 寻求帮助

app.components.ts：

   import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { dataSelector, DATA_LOAD } from './store.sevice/ngrx.store/globalStore.action';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  data$ = this.store.select(dataSelector)

  constructor(private store: Store) {

    this.store.dispatch(DATA_LOAD());

  }

reducer.reducer.ts：

import {ActionReducerMap, MetaReducer} from '@ngrx/store';
import { environment } from 'src/environments/environment';

import { counterReducer, DATA_KEY } from './globalStore.action';


export interface State {
  [DATA_KEY]: any;
}

export const reducers: ActionReducerMap<State> = {
  [DATA_KEY]: counterReducer,
};


export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];

action.action.ts：

import {createAction, createFeatureSelector, createReducer, createSelector, on, props} from '@ngrx/store';

export const DATA_KEY = 'DATA';

export const DATA_LOAD = createAction('[DATA] DATA_LOAD');


export const initialState: any = {
  data: {}
};

export const counterReducer = createReducer(
  initialState,
  on(DATA_LOAD, state => ({
    ...state.data,
    ...fetch('https://gutendex.com/books')
        .then(response => response.json())
        .then(data => data)
  }))
);

export const featureSelector = createFeatureSelector<any>(DATA_KEY);

export const dataSelector = createSelector(
  featureSelector,
  state => state.data
);

Answer 1

还原仅用于纯（和同步）方法。
副作用，例如API调用，属于 @ngrx/效果。
通常的流量是：

• 组件调度提取动作
• 效果选择获取操作，进行API调用，并派遣取得成功或获取错误操作
• 减少器可挑选Fetch成功，并且更新状态
• 选择器是更新，并且组件获取数据，

请查看 数据。 NGRX的示例应用程序具有示例。

更多链接：

• https://ngrx.io/guide/fects
• /Github.com/ngrx/platform/tree/master/project/project/example-app/src/app“ rel =” nofollow noreferrer“ App/src/app