title: get ngrx async data from server
body: <p>how to get asynchronous data from the server?</p>
  <p>i want to store data in global store for later update</p>
  <p>but I can't understand the logic of osynchronous calls like in redux</p>
  <p>with simple data, I was able to figure it out, but getting data from the server is not given to me</p>
  <p>I really ask for help</p>
  <p>app.components.ts:</p>
  <pre><code>   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());
  
    }
  </code></pre>
  <p>reducer.reducer.ts:</p>
  <pre><code>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&lt;State&gt; = {
    [DATA_KEY]: counterReducer,
  };
  
  
  export const metaReducers: MetaReducer&lt;State&gt;[] = !environment.production ? [] : [];
  </code></pre>
  <p>action.action.ts:</p>
  <pre><code>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 =&gt; ({
      ...state.data,
      ...fetch('https://gutendex.com/books')
          .then(response =&gt; response.json())
          .then(data =&gt; data)
    }))
  );
  
  export const featureSelector = createFeatureSelector&lt;any&gt;(DATA_KEY);
  
  export const dataSelector = createSelector(
    featureSelector,
    state =&gt; state.data
  );
  </code></pre>