nstate

nstate

nstate is a high-performance React state management library designed for low mental overhead. It features auto-binding, built-in Immer support for immutable updates, and powerful store composition.

Key API Methods

Practical Examples

1. The Class-Based Store (Recommended)

Encapsulate logic by extending the NState class.

import NState from 'nstate';

interface CounterState { count: number }

export class CounterStore extends NState<CounterState> {
  inc = () => this.setState(s => ({ count: s.count + 1 }));

  // Using Immer draft
  reset = () => this.setState(draft => { draft.count = 0; });
}

export const counterStore = new CounterStore({ count: 0 });

2. Form Binding with useBind

Eliminate boilerplate onChange handlers while maintaining type safety.

function ProfileEditor() {
  const bind = store.useBind(s => s.user);
  return (
    <input type="text" {...bind('name')} />
    /* Automatically handles value and onChange */
  );
}

3. Store Composition

You can link stores together using the watch API inside onInit.

export class RootStore extends NState<GlobalState> {
  child = new ChildStore({ data: '' });

  onInit() {
    this.child.watch(s => s.data, (val) => {
      console.log("Child store updated global effect:", val);
    });
  }
}