Нужно ли подписаться на магазин redux в Angular2?

Question

Использование магазина Redux в компоненте я учил сделать следующее:

ngOnInit(){ 
    this.store.subscribe(() => { 
     this.counter = this.store.getState().counter; 
    }); 
} 

Почему я не могу просто написать {{store.getState().counter}} в моем шаблоне. Он работает отлично, даже лучше, потому что отображается начальное значение.

1. Есть ли причина явно подписаться или сделать это угловой2 для вас за кулисами?
2. Если мне нужно подписаться, как мне отобразить начальное значение?

@dannyjolie:

Спасибо за попытку объяснить, но ваше предположение не верно. В следующем фрагменте я изменил шаблон обратно из подписанных переменных класса в хранилище и продолжал работать. (См Github для всего проекта)

@Component({ 
    selector: "todo-list", 
    directives: [Todo], 
    pipes: [VisibleTodosPipe], 
    template: `<div> 
     <ul> 
      <todo 
       *ngFor="#todo of store.getState().todos | visibleTodos: store.getState().filter" 
       [completed]="todo.completed" 
       [id]="todo.id" 
      > 
       {{todo.text}} 
      </todo> 
     </ul> 
    </div>` 
}) 
export class TodoList { 
    constructor(
     @Inject('AppStore') 
     public store: AppStore 
    ){ 
     this.unsubscribe = this.store.subscribe(() => { 
      let state = this.store.getState(); 
      this.currentFilter = state.filter; 
      this.todos = state.todos; 
     }); 
    } 

    private ngOnDestroy(){ 
     this.unsubscribe(); //remove listener 
    } 

} 

Answer 1

Я не использовал Redux с Angular2, но я совершенно уверен, что это из-за неизменности государства Redux в. Для примитивного счетчика, который, я думаю, является целым числом, никаких проблем. Но рассмотрим объект. Если ваш шаблон использует значение ниже в дереве состояний, у вас, вероятно, будет большая проблема с обновлением значений.

{{store.getState().counterObject.value}} свяжет вас Угловая модель с любым counterObject.value находится во время работы. В вашем редукторе counterObject, будет создан совершенно новый объект counter, но модель будет по-прежнему указывать на старую ссылку на память counterObject. Этот объект не изменится. Чтобы преодолеть это, вы должны подписаться на изменения в магазине и привязать this.counter к текущему значению.

Резюмируя с псевдо-иш кодом:

// Initial counter state, counter is stored in e.g. memory location 1 
counter = { 
foo: 'bar', 
value: 0 
} 

// Bind this object directly 
{{this.store.getState().counter.value}} // Points at memory location 1 

// Update counter with a reducer 
counter = Object.assign({}, counter, {value: 1}) // Creates a new object, memory location 2 

// Angular fails to update, because it's still pointing at the first counter object stored in memory location 1