Me las arreglé para obtener datos del servidor
pero no es posible guardar los datos en la tienda
cuando se llama, se devuelve el valor predeterminado
y en redux Devtols no hay valores que se puedan mostrar
¿Qué estoy haciendo mal? no entiendo por 2 dias
documento html - vacío
aplicación.componente.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)); } }tienda.servicio.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.acción.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.reductor.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);Suscríbase a la solicitud http para activarla, como a continuación
this.DataLoad().subscribe(book => { this.store$.dispatch(DataLoad(book)); });Es mejor agregar la obtención de datos dentro de una clase de efecto , pero no en el constructor de StoreService. Como abajo:
createEffect(() => this.actions$.pipe( ofType('[DATA] GET_DATA'), mergeMap(() => this.storeService.DataLoad() .pipe( map(books => DATA_LOAD(books)), catchError(() => EMPTY) )) ) );