Issue in implementing the Ngrx Store service into my component

Question

After a user tried to help with an issue regarding that post: My stackoverflow old post I am now trying to implement the Ngrx store using Ngrx store github to help me solve multiples input/output event.

Just after my constructor I have an error:

counter is not assignable to parameter of type (state: Appstate) => boolean:

child.ts:

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { UserService3 } from '../user3.service';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { ON, OFF, RESET } from '../counter';

interface AppState {
  counter: boolean;
}

@Component({
  selector: 'my-daydetail',
  templateUrl: './my-daydetail.component.html',
  styleUrls: ['./my-daydetail.component.css']
})
export class MyDaydetailComponent  {

  counter: Observable<boolean>;

  constructor(private store: Store<AppState>) {
    this.counter = store.select('counter');
  }

  //...
}

counter.ts

import { Action } from '@ngrx/store';

export const ON = 'ON';
export const OFF = 'OFF';
export const RESET = 'RESET';

export function counterReducer(state: boolean = true, action: Action) {
  switch (action.type) {
  case ON:
    return false;

  case OFF:
    return true;

  case RESET:
    return 0;

  default:
    return state;
}

}

Answer 1

You have set the initial state to false in your reducer. Make it any and initialize it with empty object. Also in your switch case for ON/OFF/RESET etc. you have to return immutable state like below:

return {...state, counter:true/false/0}