Question

在组件中使用Redux存储我被教导要执行以下操作：

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

为什么我不能简单地在我的模板中写{{store.getState().counter}}。它工作正常，甚至更好，因为显示初始值。

是否有理由明确订阅或在幕后为您设置angular2？
如果我需要订阅，我该如何显示初始值？

@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状态的不变性。对于像计数器这样的原语，我猜这是一个整数，没问题。但考虑一个对象。如果您的模板在状态树中使用了更低的值，那么查看更新的值可能会遇到很大的问题。

counterObject.value会将Angular模型绑定到运行时的counter。在你的counterObject reducer中，将创建一个全新的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绑定到当前值。

用伪ish代码总结：

Aim = item.Elements("Aim").ToDictionary(x => (string)x.Element("Type"), x => new Stat(int.Parse((string)x.Element("Value")), int.Parse((string)x.Element("Last"))))

我是否需要订阅Angular2中的redux商店？

1 个答案: