Is missing the following properties from type 'Observable<PizzaState>

Question

I try to create pizzas$ that receive from store but have red sight on this .

this.pizzas$

I don't know why this happened but when i delete : Observable<PizzaState> this this fix but i want to do with strongly type how can i fix it?

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

  }

}

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 inside node module

    StoreModule.forRoot(
      { 'pizzas': reducers.pizzas }
    )

Thank for help :-)

Answer 1

You shouldn't be subscribing if you want it to be an Observable, as the subscription will unwrap it from the Observable. You have two options:

public pizzas$: PizzaState;
...
this.store.select('pizzas').subscribe(store => {
  this.pizzas$ = store;
});

or

public pizzas$: Observable<PizzaState>;
...
this.pizzas$ = this.store.select('pizzas');