ng store 在调用时不保存状态

Question

我成功从服务器获取数据

但无法将数据保存在商店中

调用时返回默认值

而且在redux Devtols中没有可以显示的值

我做错了什么？ 2天没看懂

html 文档 - 空

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);

Answer 1

请订阅http请求触发它，如下所示

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

最好在 effect class 中添加数据获取，而不是在 StoreService 的构造函数中。如下图：

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

ng store 在调用时不保存状态

ng store doesn't save state when called

javascript

angular

typescript

ngrx

ngrx-store