How to add object to the existing dynamic Akita store which contains Array using angular

Question

I'm storing dynamic values in Akita store without creating a Model.

I'm trying to add a object to the existing array from store, I'm new to akita so tried deep cloning of akita store values and then pushed that object to the array and set the changed array to the store again, but it's duplicating the values in store

updatestore(data) {
  var _res = _.cloneDeep(this.GetState());
  _res[1].geography.data.push(data);
  this.gStore.destroy();
  this.gStore.set(_res);
  this.GetState();
}

I reproduced it in stackblitz

Answer 1

Akita provides us two types of stores:

• a basic store which can hold any shape of data

• an entity store which represents a flat collection of entities.

Entity Store

You chose second option(and that's the right choice for your geography collection) and created Entity based store. Now you need to provide a collection to Akita store but you're providing the whole json object. Akita tries to convert this object to array of entities but creates wrong array.

set()

Replace current collection with the provided collection, and resets the active entity

Taken from Akita docs

What you should do instead is to pass an Array to EntityStore.set method

this.serv.SetState(data['data'].geography.data)

and then simply call EntityStore.add method in order to add one more item to your collection:

this.gStore.add(data);

Forked Stackblitz Akita Entity store

---

Basic Store

If you don't want to use handy EntityStore then you can implement basic store:

import { Store, StoreConfig } from '@datorama/akita';

export class GeoStore extends Store<IGeoState> {
   ...

Only then you can update store like you described by using Store.update method

var _res = _.cloneDeep(this.GetState());
_res.data.geography.data.push(data);

this.gStore.update(_res);

Forked Stackblitz Akita basic