AngularNGXS不更新选择器,除非状态中的所选数据发生更改。
创始人
2024-10-28 18:31:22
0

使用memoization函数来保存上一次选择器的结果,并在数据变化时重新计算选择器。

示例代码:

import { createSelector } from '@ngxs/store';

export class MyStateModel {
  data: string[];
  selectedId: number;
}

export class MyState {
  @Selector()
  static selectedData(state: MyStateModel) {
    return state.data.find(d => d.id === state.selectedId);
  }
  
  @Selector()
  static otherData(state: MyStateModel) {
    const selectedData = MyState.selectedData(state); // 通过调用选择器获取所选数据
    // 处理其他数据
    return processedData;
  }

  @Action(UpdateSelection)
  updateSelection(ctx: StateContext, { selectionId }: UpdateSelection) {
    const state = ctx.getState();
    if (state.selectedId !== selectionId) {
      ctx.patchState({ selectedId: selectionId });
      MyState.otherData.release(); // 释放先前的memoization缓存
    }
  }
}

export function memoize(fn: (arg: T) => U): (arg: T) => U {
  let lastArg: T;
  let lastResult: U;
  return arg => {
    if (arg === lastArg) {
      return lastResult;
    }
    lastArg = arg;
    lastResult = fn(arg);
    return lastResult;
  };
}

// 创建一个选择器的memoize包装器
function memoizeSelector(selector: (arg: T) => U) {
  const memoizedSelector = createSelector(selector);
  return memoize(memoizedSelector);
}

// 在组件中使用memoizeSelector
export class MyComponent {
  selectedData$ = memoizeSelector(MyState.selectedData);
  otherData$ = memoizeSelector(MyState.otherData);

  constructor(private store: Store) {}

  updateSelection(id: number) {
    this.store.dispatch(new UpdateSelection(id));
  }
}

相关内容

热门资讯

安装ug未能链接到许可证服务器 安装UG未能链接到许可证服务器是UG用户在安装软件时常遇到的问题之一。该问题的解决方法需要技术向的知...
按转换模式过滤日志【%t】。 要按照转换模式过滤日志,可以使用正则表达式来实现。下面是一个示例代码,使用Java语言的Patter...
安装某些NPM包时,'... 在NPM中,'@'符号是用来分隔软件包名称和其特定版本或范围参数的。例如,您可以使用以下命令安装 R...
安装Pillow时遇到了问题:... 遇到这个问题,可能是因为缺少libwebpmux3软件包。解决方法是手动安装libwebpmux3软...
安卓 - 谷歌地图卡住了 问题描述:在安卓设备上使用谷歌地图应用时,地图卡住了,无法进行任何操作。解决方法一:清除应用缓存和数...
Android TV 盒子出现... Android TV 盒子上的应用程序停止运行可能是由于多种原因引起的,以下是一些可能的解决方法和相...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
安装未成功。应用程序无法安装。... 在Android开发中,当应用程序无法安装并显示错误消息“安装未成功。应用程序无法安装。安装失败原因...
Apple Watch上的缩放... 若Apple Watch上的缩放度量无法正常工作,可能是由于以下原因导致的:1. 应用程序代码错误;...
Artifactory在网页上... 要在Artifactory的网页上列出工件,您可以使用Artifactory的REST API来获取...