状态更改时不调用 ngrx 存储订阅

2024-04-12

我正在使用我的服务中定义的虚拟数据创建一个应用程序。

在一个组件中,我具有以下删除产品的功能:

  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函数被调用并返回正确的数据,但回调没有被调用。

我错过了什么吗?


我认为问题在于payload您在减速器中返回的对象引用与现有状态相同。尝试返回一个新对象,看看这是否会导致您的订阅被调用。就像这样:

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;
  }
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

状态更改时不调用 ngrx 存储订阅 的相关文章

随机推荐

  • Itext 7 - PdfReader 未使用所有者密码打开错误

    I am using This example https developers itextpdf com content itext 7 jump start tutorial examples chapter 5 for the lat
  • 迭代数组时应该使用 for-of 还是 forEach? [复制]

    这个问题在这里已经有答案了 另外 这是风格问题还是功能问题 这是一个偏好问题还是一个更好 我试图理解 for of 的目的 通常我使用 let iterable 10 20 30 iterable forEach val gt consol
  • 将 WAV 文件转换为频谱图

    嗨 我对这件事很陌生 所以请耐心等待 我正在尝试将 WAV 文件转换为频谱图 但不确定如何开始 我读到一些内容 说要读取 PCM 数据 我认为是我的 WAV 文件 并将其存储在 WavReader 类的数组中 然后再对其应用 FFT 并将其
  • django:gettext 并强制转换为 unicode

    我的 Django 应用程序中有以下代码 class Status object def init self id desc self id id self desc desc def unicode self return self de
  • 将所有选定的项目从 ListView 复制到 ListView 2

    如何将多个项目从 ListView 复制到另一个 现在我正在这样做 procedure TForm1 CopyToRightClick Sender TObject var selected TListItem addItems TList
  • 主动调整主窗口内小部件的大小

    I have a few widgets in a main window i want the user to be able to resize the widgets inside the window as they please
  • 替换 DataColumn 中的值

    循环行时如何替换列值 我的数据表有两列 我想替换每一行第一列的值 我无法获取或设置列值 到目前为止 我只能访问 DefaultValue 和 ColumnName 等 即使创建新的 DataColumn 我也无法设置其值 感觉我在这里缺少一
  • 如何使用批处理文件从系统配置中删除环境变量

    我需要从客户端工作站中删除系统变量 我有 500 多个客户端 所以我想提供批处理文件给用户自己运行以删除系统变量 You may want to make these two permanent with setx but obviousl
  • 如何在Linux shell脚本中插入新行? [复制]

    这个问题在这里已经有答案了 我想在多个 echo 语句之间插入一个新行 我努力了echo hello n 但它不起作用 正在打印 n 我想要这样的期望输出 Create the snapshots Snapshot created 在之间插
  • 如何在不闪烁的情况下更新 Shiny 中的值?

    我每秒都会更新一个闪亮的文本输出 该文本输出是从 SQL 数据库读取的 这只需要一些时间 在仪表板中 我只想看看输出如何变化而没有花哨的动画 闪烁 是否可以在等待更新时删除动画并仅显示文本 这是一些代码示例 您可以在其中看到更新的闪烁 ui
  • C++ 对象将模板化函数和参数保留为成员以便稍后调用

    我有课Door实现一个方法LockCheck 和一个类Stove用一种方法BurnerCheck 我想要上课House作为构造函数参数Door LockCheck or Stove BurnerCheck以及给定函数的一组未知参数 Hous
  • Xcode 7 - 如何删除 ld: warning: -read_only_relocs 不能与 x86_64 一起使用

    我最近更新到了 Xcode 7 现在在编译时收到以下警告 ld 警告 read only relocs 不能与 x86 64 一起使用 我认为我没有更改构建设置或代码中的任何内容来创建它 有谁知道导致此警告的原因以及如何删除它 我已经为感兴
  • 用于组合垂直/内联字段的 Bootstrap 复杂表单布局

    我对 Bootstrap 很陌生 但我的技能增长很快 也很欣赏它 我需要构建一个相当复杂的页面 其中包含大量表单元素 包括多个地址填写组件 我在这里附上了我想要的基本设计的图像 但似乎无法使用我可用的基本表单设计元素来实现它 我觉得我的方法
  • 获取WPF中控件的可见大小

    我有一个未完全显示的控件 通过减小窗口大小 但该控件的 ActualWidth 和 RenderSize DesiredSize 仍然显示其总大小 我编写了下一个代码 但它忽略了窗口的滚动条宽度 看起来很丑 也许有一种方法可以以更优雅的方式
  • 如何使用javascript浏览器端获取显卡驱动程序名称?

    我想得到一个像这样的字符串 英特尔开源技术中心 Mesa DRI 英特尔 R 高清显卡 520 Skylake GT2 仅在浏览器上使用 javascript 我知道有一个图书馆augur io https www augur io dev
  • 如何从多个类扩展状态

    请注意 了解集换式卡牌游戏 万智牌 聚会 将是一个优势 抱歉 我不知道如何更容易地表达它 我使用时遇到了一个问题Java 我将描述如下 我有一个名为 Card 的基本类 具有以下所有属性 public class Card String N
  • Android Twitter 出现 oauth-signpost 错误授权失败(服务器回复 401)

    你好 我尝试将 Twitter 与 OAuth 结合使用 但收到此异常 授权失败 服务器回复 401 如果消费者密钥不正确或签名不匹配 则可能会发生这种情况 我正在使用这个示例http code google com p oauth sig
  • 网络提供商无法在 Android 中运行

    我必须制作一个Android应用程序 在其中我需要找到用户的当前位置 为此 我首先使用 GPS 提供商 但如果它不可用 我会求助于网络提供商 现在 我的手机上出现过连网络提供商都无法工作的情况 并且声明 网络启用 lm isProvider
  • 自动删除 HTML 和 Javascript 注释

    我想自动删除 HTML 和 JavaScript 注释 我在服务器上使用 ant 脚本进行部署和 JSF 有哪些选项或工具可用 提前致谢 用正则表达式替换混合 HTML 和 JavaScript 的文件中的注释是有风险的 然而 单独地 你可
  • 状态更改时不调用 ngrx 存储订阅

    我正在使用我的服务中定义的虚拟数据创建一个应用程序 在一个组件中 我具有以下删除产品的功能 removeItem productId string this cartService removeItem productId 以及服务如下 r