I am attempting to create pizzas that I receive from the store, but I am encountering a red flag on this issue.
this.pizzas$
I'm unsure why this is happening, but when I remove : Observable<PizzaState>, it resolves the problem. However, I want to maintain type safety. How can I resolve this?
Here is the full code:
import { Store } from '@ngrx/store';
import { ProductesState } from '../shared/models/productesState.model';
import { Observable } from 'rxjs';
import { PizzaState } from '../shared/models/pizzaState.model';
@Component({
selector: 'app-read',
templateUrl: './read.component.html',
styleUrls: ['./read.component.css']
})
export class ReadComponent implements OnInit {
public pizzas$: Observable<PizzaState>;
constructor(private store: Store<ProductesState>) { }
ngOnInit() {
this.store.select('pizzas').subscribe(store => {
this.pizzas$ = store;
});
}
}
This is my reducer:
import { PizzaState } from 'src/app/shared/models/pizzaState.model';
import * as fromPizzas from '../actions/pizzas.action'
export const initialState: PizzaState = {
data: [],
loaded: false,
loading: false
}
export function reducer
(state: PizzaState = initialState, action: fromPizzas.PizzasAction): PizzaState {
switch (action.type) {
case fromPizzas.LOAD_PIZZAS: {
return {
...state,
loading: true
}
}
case fromPizzas.LOAD_PIZZAS_SUCCESS: {
return {
...state,
loaded: true,
loading: false
}
}
case fromPizzas.LOAD_PIZZAS_FAIL: {
return {
...state,
loaded: false,
loading: false
}
}
default: {
return state;
}
}
}
And here is the configuration inside node module:
StoreModule.forRoot(
{ 'pizzas': reducers.pizzas }
)
Thank you for your assistance :-)