Environment Store

Stores the properties that the application needs.

EnvironmentStore is a singleton service responsible for maintaining a reference to all the technical or functional properties that the application needs. It is the most important service of the library and must be implemented to manage the environment state.

Can be integrated into any application using the provided default implementation or creating a custom one to integrate it with any state manager already used by the application.

import { EnvironmentStore } from '@kuoki/environment';

class CustomEnvironmentStore implements EnvironmentStore {
  // ...implement environment store interface
}

const environmentStore: EnvironmentStore = new CustomEnvironmentStore();

DefaultEnvironmentStore

A basic RxJS environment store implementation that uses a BehaviorSubject as state manager that can be instantiated from...

1. A factory function.

import { createEnvironmentStore, EnvironmentStore } from '@kuoki/environment';

const environmentStore1: EnvironmentStore = createEnvironmentStore({});
const environmentStore2: EnvironmentStore = createEnvironmentStore({ a: 0 });

2. The newable class.

import { DefaultEnvironmentStore, EnvironmentStore } from '@kuoki/environment';

const environmentStore1: EnvironmentStore = new DefaultEnvironmentStore({});
const environmentStore2: EnvironmentStore = new DefaultEnvironmentStore({ a: 0 });

3. A class that extends DefaultEnvironmentStore.

import { DefaultEnvironmentStore, EnvironmentState, EnvironmentStore } from '@kuoki/environment';

class CustomEnvironmentStore extends DefaultEnvironmentStore {
  constructor(protected override readonly _initialState?: EnvironmentState) {
    super(_initialState);
  }
  // ...override implementation
}

const environmentStore1: EnvironmentStore = new CustomEnvironmentStore({});
const environmentStore2: EnvironmentStore = new CustomEnvironmentStore({ a: 0 });

Use cases

Below are examples of the expected behavior and some custom implementation examples.

Table of Contents

1. getAll$
2. getAll
3. update
4. reset
5. Implementation using Redux
6. Implementation using Akita

getAll$

Returns the values ​​of all properties in the EnvironmentState asynchronously, emitting an Observable each time it changes.

// EnvironmentState = ^{a:0}-{a:0}-{a:0,b:0}-
environmentStore.getAll$(); // ^{a:0}-{a:0}-{a:0,b:0}-

getAll

Returns the values ​​of all the propertiesin the EnvironmentState synchronously, the one that exists at that moment.

// EnvironmentState = ^{a:0}-{a:0}-{a:0,b:0}-
environmentStore.getAll(); // {a:0}

update

It is important to ensure that the store update is an overwrite and not a partial update, because the service will manage the entire environment in the implementation, and a partial update can cause inconsistencies.

// CORRECT: Overwrite
// EnvironmentState = {a:0}
environmentStore.update({ b: 0 });
// EnvironmentState = {b:0}

// WRONG: Partial Update
// EnvironmentState = {a:0}
environmentStore.update({ b: 0 });
// EnvironmentState = {a:0,b:0}

reset

Resets the initial EnvironmentState to the provided one.

// EnvironmentState = {a:0}
environmentStore.reset();
// EnvironmentState = {}

Implementation using Redux

Redux is a predictable state container for JavaScript apps.

import { createStore } from 'redux';
import { from } from 'rxjs';

const initialState = {};
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE':
      return action.environment;
    case 'RESET':
      return initialState;
    default:
      return state;
  }
};
const store = createStore(reducer);
export const environmentStore = {
  getAll$: () => from(store),
  getAll: () => store.getState(),
  update: (environment) => store.dispatch({ type: 'UPDATE', environment }),
  reset: () => store.dispatch({ type: 'RESET' })
};

Implementation using Akita

Akita is a state management pattern built on top of RxJS.

import { createStore } from '@datorama/akita';

const store = createStore({}, { name: 'environment', resettable: true });
export const environmentStore = {
  getAll$: () => store._select((state) => state),
  getAll: () => store.getValue(),
  update: (environment) => store._setState(environment),
  reset: () => store.reset()
};