状态更改时不调用ngrx商店订阅

我正在使用服务中定义的虚拟数据创建应用程序。状态更改时不调用ngrx商店订阅

在一个组分，我有以下功能删除产品：

removeItem(productId: string) { 
     this.cartService.removeItem(productId); 
    }

和服务如下：

removeItem(productId: string) { 
    const itemIndex = this.cart.products.findIndex(el => el.id === productId); 
    if (itemIndex > -1) { 
     this.cart.products.splice(itemIndex, 1); 
     return Observable.of(this.cart) 
     .subscribe((cartResponse: Cart) => { 
      this.store.dispatch({ type: CART_UPDATE, payload: cartResponse }); 
     }); 
    } 
    }

（this.cart是我在已经硬编码的数据服务）。

我减速的样子：

export const cartReducer = (state: Cart = {} as Cart, {type, payload}) => { 
    switch (type) { 

    case CART_UPDATE: 
     // update categories state 
     return payload; 
    default: 
     return state; 
    } 
};

然后我订阅的车在一个组件，如：

ngOnInit() { 
    this.store.select('cart').subscribe((cart: Cart) => { 
     console.log('here'); 
     this.numberOfItems = cart.products.length; 
    }); 
    }

我也有app.module

StoreModule.provideStore({ 
    cart: cartReducer 
}),

的删除功能工作正常，代码到达减速机功能正确的有效载荷。

问题是仅在第一次加载组件时调用组件中的订阅回调。

当我调用remove函数时，产品确实被移除并调用Reducer函数并返回正确的数据，但未调用回调函数。

我错过了什么吗？

来源

2017-09-07 callback

我认为问题在于，您在reducer中返回的与现有状态具有相同的对象引用。尝试返回一个新的对象，看看是否会导致您的订阅被调用。像这样：

export const cartReducer = (state: Cart = {} as Cart, {type, payload}) => { 
    switch (type) {  
    case CART_UPDATE: 
     // update categories state 
     return { ...payload }; // equivalent to Object.assign({}, payload); 
    default: 
     return state; 
    } 
};

来源

2017-09-07 14:15:23

请问请进一步解释一下负载如何具有与状态相同的对象引用？ – callback

在cartService中，您可以参考当前状态。您正在对它进行变异，然后将其发送给reducer，以便对象引用永远不会改变。我建议你从组件派遣事件，删除服务，并删除产品，并从还原器中返回新版本状态 –

这已挽救了我的生命。一直苦苦挣扎几个小时，想知道为什么它不工作 – suku

状态更改时不调用ngrx商店订阅

回答

相关问题