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