@veams/status-quo v0.0.2

Status Quo (@veams/status-quo)

The Manager to rule your state.

Table of Content

1. Getting Started
2. Example

Getting Started

1. Create your own state handler which handles all the streams and a state you expose next to the actions
2. Use actions and state in your component
3. When using React, initialize the state handler with a custom hook called useStateFactory() (or useStateSingleton() for Singleton states)

These three steps are necessary to create a completely decoupled state management solution without the need of creating custom hooks with useEffect().

Note: Please keep in mind that dependencies for the hook needs to be flattened and cannot be used as an object due to how React works.

Example

Let's start with a simple state example. You should start with the abstract class BaseState:

import { useStateFactory, StateHandler } from '@veams/status-quo';

type CounterState = {
  count: number;
};
type CounterActions = {
  increase: () => void;
  decrease: () => void;
};

class CounterStateHandler extends StateHandler<CounterState, CounterActions> {
  constructor([startCount = 0]) {
    super({ initialState: { count: startCount } });
  }
  
  getActions() {
    return {
      increase() {
        this.setState({
          count: this.getState() + 1
        })
      },
      decrease() {
        const currentState = this.getState();

        if (currentState.count > 0) {
          this.setState({
            count: currentState - 1
          })
        }
      }
    }
  }
}

export function CounterStateFactory(...args) {
  return new CounterStateHandler(...args);
}

This can be used in our factory hook function:

import { useStateFactory } from '@veams/status-quo';
import { CounterStateFactory } from './counter.state.js';

const Counter = () => {
  const [state, actions] = useStateFactory(CounterStateFactory, [0]);
  
  return (
    <div>
      <h2>Counter: {state}</h2>
      <button onClick={actions.increase}>Increase</button>
      <button onClick={actions.decrease}>Decrease</button>
    </div>
  )
}

What about singletons?

Therefore, you can use a simple singleton class or use makeStateSingleton() and pass it later on to the singleton hook function:

import { makeStateSingleton } from '@veams/status-quo';

import { CounterStateHandler } from './counter.state.js';

export const CounterStateManager = makeStateSingleton(() => new CounterStateHandler([0]))

import { useStateSingleton } from '@veams/status-quo';
import { CounterStateManager } from './counter.singleton.js';

const GlobalCounterHandler = () => {
  const [_, actions] = useStateSingleton(CounterStateManager);
  
  return (
    <div>
      <button onClick={actions.increase}>Increase</button>
      <button onClick={actions.decrease}>Decrease</button>
    </div>
  )
}

const GlobalCounterDisplay = () => {
  const [state] = useStateSingleton(CounterStateManager);
  
  return (
    <div>
      <h2>Counter: {state}</h2>
    </div>
  )
}