Angular Akita存入EntityState数组仅重复最后一项问题求助

问题根因 #

你遇到的问题是Akita EntityStore的主键识别规则导致的：
Akita的EntityStore默认使用id字段作为每个实体的唯一主键，你当前的实体类型是纯字符串string，不存在id属性，导致Akita识别所有实体的主键完全相同，逐个写入实体时后续内容会覆盖之前的内容，最终就出现了数组长度正常但所有元素都是最后一项的现象。

解决方案 #

有两种可选的修复方案，你可以根据业务需求选择：

方案1：调整EntityStore的idKey配置（保留EntityStore能力） #

显式指定id的生成规则，用字符串本身作为实体的唯一主键，只需要修改UserTagStore的@StoreConfig配置即可：

@Injectable({
  providedIn: 'root'
})
@StoreConfig({ 
  name: 'usertags',
  // 自定义id生成规则，直接返回字符串本身作为主键
  idKey: (tag: string) => tag 
})
export class UserTagStore extends EntityStore<UserTagState> {
  constructor() {
    super(initialState);
  }
}

修改后重新测试，存入的实体就会按各自的字符串值作为唯一id，不会出现覆盖问题。

方案2：改用普通Store（更适配当前场景） #

如果你不需要用到EntityStore提供的实体增删改查、按id查询等专属能力，只是要存储一个字符串数组，直接使用普通Store会更简单，不需要处理主键规则：

1. 调整State定义：

export interface UserTagState {
  tags: string[];
  areTagsLoaded: boolean;
}

const initialState: UserTagState = {
  tags: [],
  areTagsLoaded: false
};

2. 调整Store定义，继承普通Store而非EntityStore：

@Injectable({
  providedIn: 'root'
})
@StoreConfig({ name: 'usertags' })
export class UserTagStore extends Store<UserTagState> {
  constructor() {
    super(initialState);
  }
}

3. 调整存入逻辑：

// loadTags方法中的存储逻辑修改为
.subscribe((tags) => {
  this.store.setLoading(false);
  this.store.update({
    tags,
    areTagsLoaded: true
  });
});

4. 调整Query的查询逻辑：

@Injectable({
  providedIn: 'root'
})
export class UserTagQuery extends Query<UserTagState> {
  tags$ = this.select(state => state.tags);
  tagsAreLoaded$ = this.select(state => state.areTagsLoaded);

  constructor(protected store: UserTagStore) {
    super(store);
  }
}

内容的提问来源于stack exchange，提问作者Mukil Deepthi