ng store doesn't save state when called-CodePudding

I managed to get data from the server

but it is not possible to save the data in the store

when called, the default value is returned

and in redux Devtols there are no values that could be displayed

what am I doing wrong? I don't understand for 2 days

html document - empty

app.component.ts :

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

export class AppComponent {
  
  book$: Observable<{data: Book} | {}> = this.store$.select(selectData);

  constructor(private store$: Store<{book: {data: Book}}>) {}

  ngOnInit() {

    this.store$.dispatch(GET_DATA());

  }

  getBook() {

    this.book$.subscribe(book => console.log(book));

  }

}

store.service.ts:

@Injectable({
  providedIn: 'root'
})

export class StoreService {

  constructor(private http:HttpClient) {

    this.DataLoad();

  }

  DataLoad():Observable<Book> {

    return (this.http.get('https://gutendex.com/books') as Observable<Book>);

  }
  
}

globalStore.action.ts:

import {createAction} from '@ngrx/store';
import { Book } from 'src/app/interface/interface';

export const DATA_KEY = 'book';

export const initialState: {data: Book} = {
    data: {
        count: 0,
        next: '',
        previous: null,
        results:  []
    }
};

export const DATA_LOAD = createAction('[DATA] DATA_LOAD', (book:Book) => {
    return {data: book}
});

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

globalStore.reducer.ts:

import {ActionReducerMap, createReducer, on} from '@ngrx/store';
import { Book } from 'src/app/interface/interface';

import { DATA_KEY, DATA_LOAD, GET_DATA, initialState } from './globalStore.action';


export const BookReducer = createReducer(
  initialState,
  on(DATA_LOAD, (state, data:any) => {
    return {data: data.data}
  }),
  on(GET_DATA, (state: {data: Book}) => {
    return {data: state.data}
  })
);


export interface State {
  [DATA_KEY]: any;
}

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

globalStore.selector.ts:

import { createFeatureSelector, createSelector } from "@ngrx/store";
import { Book } from "src/app/interface/interface";
import { DATA_KEY } from "./globalStore.action";

export const selectDataFeature = createFeatureSelector<{data: Book}>(DATA_KEY);


export const selectData = createSelector(selectDataFeature, (state: {data: Book}) => state);

CodePudding user response：

Please subscribe http request to trigger it, like below

this.DataLoad().subscribe(book => {
    this.store$.dispatch(DataLoad(book));
});

It's better to add data fetching inside a effect class, but not in constructor of StoreService. Like below:

createEffect(() => this.actions$.pipe(
    ofType('[DATA] GET_DATA'),
    mergeMap(() => this.storeService.DataLoad()
      .pipe(
        map(books => DATA_LOAD(books)),
        catchError(() => EMPTY)
      ))
    )
  );