Angular Akita only setting the last value in an array

Question

I am new to Angular with Akita state management. I am trying to set the array of values to the entitystate. but for some reason only the last item in the array is getting set. But the number of values is correct. ie. i have 14 different items in the array. but in akita, the last value is set for 14 times. Not sure what am i doing wrong here. Can anyone please help with this?

export interface UserTagState extends EntityState<string, string> {
  areTagsLoaded: boolean;
}

const initialState = {
  areTagsLoaded: false
};

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

facade:

@Injectable({
  providedIn: 'root'
})
export class UserTagFacade {
  tags$ = this.query.tagsAreLoaded$
    .pipe(
      filter(areTagsLoaded => !areTagsLoaded),
      exhaustMap(areTagsLoaded => {
        if (!areTagsLoaded) {
          this.loadTags();
        }

        return this.query.tags$;
      }),
      shareReplay(1)
    );

  constructor(
    private readonly store: UserTagStore,
    private readonly query: UserTagQuery,
    private readonly api: UserTagDataService
  ) { }

  loadTags() {
    this.store.setLoading(true);
    this.api
      .getTags()
      .pipe(take(1))
      .subscribe((tags) => {
        this.store.setLoading(false);
        this.store.set(tags); // up until here the tags array shows the correct value
        this.store.update(state => ({
          ...state,
          areTagsLoaded: true
        }));
      });
  }
}

Query:

@Injectable({
  providedIn: 'root'
})
export class UserTagQuery extends QueryEntity<UserTagState> {
  tags$ = this.selectAll();

  tagsAreLoaded$ = this.select(state => {
    return state.areTagsLoaded;
  });

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

Output:

Tags: [ "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics", "trader analytics" ]

Thanks

Did you find a way to solve this? – Michael Eromose Iziken Mar 10 '22 at 11:22 — Michael Eromose Iziken, Mar 10 '22 at 11:22

score 0 · Answer 1 · answered Oct 11 '21 at 09:34

0

In loadTags(), delete below part and run again. Thanks.

this.store.update(state => ({
    ...state,
    areTagsLoaded: true
}));

answered Oct 11 '21 at 09:34

Kevin

43
1
7

score 0 · Answer 2 · answered Apr 04 '22 at 08:48

I had the exact same problem, upon trying to store an array of objects (or of whatever) the Akita store saved an array where every member of the array was the last object from array I tried to store. We failed at JavaScript to be honest and the solution is a simple spread operator:

  this.digitalAdTopicsStore.set({ ...digitalAdTopic });

This is how one sets an array to Akita store.

score 0 · Answer 3 · answered Feb 20 '23 at 19:52

For me, I was trying to implement Akita server side pagination. I made the mistake of assuming the ID in the EntityState was not a big deal. It's a very big deal and very necessary; it will assume the ID is located in the key "id", unless you specify otherwise in @StoreConfig.

I didn't have the "id" field in my EntityState objects, and it manifested itself as making the entire data array as the last element duplicated. Because the server response didn't include an "id" for each object, I generated a client-side 10 digit random ID for each object.

Angular Akita only setting the last value in an array

3 Answers3