在我的组件中实现 Ngrx Store 服务的问题答案

【问题标题】：Issue in implementing the Ngrx Store service into my component在我的组件中实现 Ngrx Store 服务的问题
【发布时间】：2017-07-25 12:58:28
【问题描述】：

在用户尝试帮助解决有关该帖子的问题后：My stackoverflow old post 我现在尝试使用Ngrx store github 实现 Ngrx 存储，以帮助我解决多个输入/输出事件。

在我的构造函数之后我有一个错误：

counter 不可分配给(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;
}

}

【问题讨论】：

@PierreDuc 也许我应该改用feature？
你做错了对增量减量可以用在布尔类型中对
@RahulSingh 认为我得到了按照您的指示查看更新后的帖子，我认为我实施正确:-)，现在 nGrx 如何帮助我解决旧帖子中的问题？
由于 counter 是一个可观察的 ypu 可以在组件中订阅它，当值发生变化时，当您向商店输入值时，您将收到该订阅的通知
@RahulSingh 所以我尝试像这样实现：@Input() hideMePartially: boolean; 它适用于任何错误，但我无法实现好处

标签： angular typescript ngrx-store

【解决方案1】：

您已在 reducer 中将初始状态设置为 false。将其设为任何并用空对象对其进行初始化。此外，在您的开关盒中进行 ON/OFF/RESET 等，您必须返回不可变状态，如下所示：

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

【讨论】：