Local Component State

We can manage a local component state using Akita and Angular. When we provide a store in the component's providers, it enables us to get a new store instance for each component we create.

For example:

counter.state.ts

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

type State = { counter: number };

@Injectable()
class CounterStore extends Store<State> {
  constructor() { 
    super({ counter: 0 }, { name: `Counter-${guid()}` }) 
  }
}

@Injectable()
class CounterQuery extends Query<State> {
  constructor(protected store: CounterStore) { super(store); }
}

counter.component.ts

@Component({
  selector: 'counter',
  template: `
    {{ counter$ | async }}
    <button (click)="increment()">Increment</button>
  `,
  providers: [CounterStore, CounterQuery]
})
export class CounterComponent {
  counter$ = this.query.select('counter');
  @Output() update = this.counter$.pipe(skip(1));

  constructor(
    private store: CounterStore,
    private query: CounterQuery
  ) { }

  increment() {
    this.store.update(({ counter }) => ({ counter: counter + 1 }));
  }
}

Counter State Provider

You can also take a different approach and create a counter state provider:

counter.state

type State = { counter: number };

class CounterState {
  store: Store<State>;
  query: Query<State>;
}

function counterStateFactory(element: ElementRef<Element>) {
  const name = element.nativeElement.getAttribute('name');
  const store = new Store<State>({ counter: 0 }, { name });
  const query = new Query<State>(store);

  return {
    store,
    query
  }
}

counter.component.ts

@Component({
  selector: 'counter',
  template: `
    {{ counter$ | async }}
    <button (click)="increment()">Increment</button>
  `,
  providers: [{
    provide: CounterState, 
    useFactory: counterStateFactory,
    deps: [ElementRef]
  }]
})
export class CounterComponent {
  counter$ = this.state.query.select('counter');
  @Output() update = this.counter$.pipe(skip(1));

  constructor(
    private state: CounterState
  ) { }

  increment() {
    this.state.store.update(({ counter }) => ({ counter: counter + 1 }));
  }
}

Open the Redux devtools, and you'll see the magic. You can play with the code here.

app.component.html

<counter (update)="onUpdate($event)" name="one"></counter>
<counter (update)="onUpdate($event)" name="two"></counter>
<counter (update)="onUpdate($event)" name="three"></counter>

Dynamic Stores

You can also manage a collection of stores in a service. For example:

@Injectable({ providedIn: 'root })
export class CountersService {
  private stores = new Map();

  createState(name: string) {
    const store = new Store({ counter: 0 }, { name });
    const query = new Query(store);

    const state = { store, query };
    this.stores.set(name, state);

    return state
  } 

  getState(name: string) {
    return this.stores.get(name);
  } 
}