⚡ wirestate

---

wirestate is a lightweight, scalable state management library for React, leveraging Inversify for Dependency Injection and MobX for reactivity. It provides a robust architecture for managing complex application logic through Services, Signals, and Queries.

Key Features

• Dependency Injection: First-class support for Inversify, allowing for decoupled and testable services.
• Reactive State: Seamless integration with MobX.
• Signals: An event-based communication system for broadcasting actions and side effects across your application.
• Queries: A structured way to request data synchronously or asynchronously from your services.
• Service Lifecycle: Automated activation and deactivation of services tied to your component tree.

Install

• npm install --save wirestate

Requirements

• react >= 16.8.0
• mobx >= 6.0.0
• mobx-react-lite >= 4.0.0
• inversify >= 8.0.0

Documentation

• InversifyJS
• MobX
• MobX-React

Quick Start

1. Define a Service

import { AbstractService, OnSignal, OnQuery, makeAutoObservable } from 'wirestate';

export class CounterService extends AbstractService {
  public count = 0;

  constructor() {
    super();
    makeAutoObservable(this);
  }

  @OnSignal('INCREMENT')
  public increment() {
    this.count++;
  }

  @OnQuery('GET_COUNT')
  public getCount() {
    return this.count;
  }
}

2. Provide Services in React

import { IocProvider, createInjectablesProvider } from 'wirestate';
import { CounterService } from './CounterService';

const InjectablesProvider = createInjectablesProvider([CounterService]);

function Application() {
  return (
    <IocProvider>
      <InjectablesProvider>
        <CounterComponent />
      </InjectablesProvider>
    </IocProvider>
  );
}

3. Consume in Components

import { observer } from 'mobx-react-lite';
import { useInjection, useSignalEmitter } from 'wirestate';
import { CounterService } from './CounterService';

const CounterComponent = observer(() => {
  const service = useInjection(CounterService);
  const emit = useSignalEmitter();

  return (
    <div>
      <p>Count: {service.count}</p>
      <button onClick={() => service.increment()}>Increment</button>
      <button onClick={() => emit({ type: 'INCREMENT' })}>Increment signal</button>
    </div>
  );
});

Proposals and contribution

Feel free to open PRs or issues.

Licence

MIT