☢ Reactor

Reactive-store

Basic minimalistic REDUX made with RxJs

Production ready observable state management

🎯 Motivation

✅ Avoid the use of heavy and complex libraries like NgRX

✅ Less than 100 lines store.ts

Installation

npm i @atomic.builders/reactor

✨ Sample use

const initialBasket: Basket = { client: '', items: [], status: '' };
const basket$ = new Store<Basket>(initialBasket);

// BASIC USAGE
// get snapshot
const currentBasket: Basket = basket$.getState();
console.log(currentBasket);
// observe changes
basket$.getState$().subscribe({
  next: basket => console.log({ basket }),
});
// observe selected changes
basket$
  .select$(basket => basket.status)
  .subscribe({
    next: status => console.log({ status }),
  });
// setting direct state
basket$.setState({ client: '', items: [], status: 'EMPTY' });

// WHITH ACTIONS
// observe actions
basket$.getActions$().subscribe({
  next: action => console.log({ action }),
});
// dispatch simple action
const setClientAction: Action<Basket> = new Action<Basket>('SET_CLIENT', {
  client: 'John Doe',
  status: 'EMPTY',
});
basket$.dispatch(setClientAction);

// WITH A REDUCER
// dispatch action with payload and reducer
const itemPayload: Item = {
  name: 'An ACME thing',
  units: 19,
  unitPrice: 71,
};
const addItemReducer = (basket: Basket, payload: unknown) => {
  basket.items = [...basket.items, payload as Item];
  basket.status = 'FILLED';
  return basket;
};
const addItemAction: Action<Basket> = new Action<Basket>('ADD_ITEM', itemPayload, addItemReducer);
basket$.dispatch(addItemAction);

⚙ Workflows

👨‍💻 Dev Workflow

While developing, make sure to install the recommended extensions for a better dev experience.

Run npm run test:watch it will run test after each change. Ideal for TDD or testing just in time.

Run npm run test it will run all test once and stops. Default for CI/CD most common environments.

If you want also the coverage report then use npm run test:coverage .

🛠 Tools

📦 Commits and release

• Use standard-version to produce a changelog file from Conventional Commits

💅 Code style with Prettier

• Installed and configured prettier

Recommended prettier extension

📐 Code linting with esLint

• Installed and configured eslint to work with prettier

Recommended esLint extension

🧪 Code tested with Jest

• Installed and configured jest to run specs
• Configured to conform with eslint
• Uses ts-jest to work natively with TypeScript

👨 Created by Alberto Basalo

@albertobasalo