stated-bean

stated-bean

A light but scalable state management library with react hooks, inspired by unstated-next. It allows you to manage the state data of multiple views together. Make cross-component data transfer simple.

TOC

• Features
• Online Demo
• Usage
• API
  • Decorators
    • StatedBean
    • Stated
    • PostProvided
    • Effect
  • use Hooks
    • useBean
    • useInject
      • Get the instance from the container in the React Context
      • Create the temporary instance for current Component
      • UseStatedBeanOption
    • useObserveEffect
  • Provider
    • <StatedBeanProvider {...props: StatedBeanProviderProps} />
• License

# yarn
yarn add stated-bean

# npm
npm i stated-bean

Features

• OOP: easy to integrate with DI(dependency inject) framework together
• Familiar API: just provider and hooks
• Small size:
• Written in TypeScript

Online Demo

GitHub Pages: Integration with injection-js

Usage

import { StatedBean, Stated, useBean } from 'stated-bean';

@StatedBean()
export class Counter {
  @Stated()
  count: number = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

function CounterDisplay() {
  const counter = useBean(Counter);

  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <span>{counter.count}</span>
      <button onClick={counter.increment}>+</button>
    </div>
  );
}

API

Decorators

StatedBean

Signature: @StatedBean(name?: string | symbol): ClassDecorator

Indicates that an annotated class is a StatedBean. The name may indicate a suggestion for the bean name. Its default value is Class.name.

Stated

Signature: @Stated(): PropertyDecorator

Indicates that an annotated property is Stated. Its reassignment will be observed and notified to the container.

PostProvided

Signature: @PostProvided(): MethodDecorator

The PostProvided decorator is used on a method that needs to be executed after the StatedBean be instanced to perform any initialization.

Effect

Signature: @Effect(name?: string | symbol): MethodDecorator

The Effect decorator is used on a method that can get the execution state by useObserveEffect.

use Hooks

useBean

Signature: useBean<T>(typeOrSupplier: ClassType<T> | () => T, name?: string | symbol): T

The useBean will create an instance of the stated bean with a new StatedBeanContainer and listen for its data changes to trigger the re-rendering of the current component.

useInject

Signature: useInject<T>(type: ClassType<T>, option: UseStatedBeanOption<T> = {}): T

The useInject will get the instance of the stated bean from the StatedBeanContainer in the context and listen for its data changes to trigger the re-rendering of the current component.

Get the instance from the container in the React Context

function SampleComponent() {
  const model = useInject(UserModel);
  // ...
}

function App() {
  return (
    <StatedBeanProvider types={[UserModel]}>
      <SampleComponent />
    </StatedBeanProvider>
  );
}

Create the temporary instance for current Component

function SampleComponent() {
  const model = useBean(() => new UserModel());

  // pass the model to its children
  return <ChildComponent model={model} />;
}

UseStatedBeanOption

option = {
  name: string | symbol;   // get/create the instance with special name
  dependentFields: Array<string | symbol>;   // do re-render when the special property changed
};

useObserveEffect

Signature: useObserveEffect(bean: StatedBeanType, name: string | symbol): EffectAction

observe the execution state of the method which with @Effect.

@StatedBean
class UserModel {
  @Effect()
  fetchUser() {
    // ...
  }
}

const UserInfo = () => {
  const model = useBean(() => new UserModel());
  const { loading, error } = useObserveEffect(model, 'fetchUser');
  // ...
};

Provider

<StatedBeanProvider {...props: StatedBeanProviderProps} />

The StatedBeanProvider is responsible for creating an instance of the stated bean and dispatching an event after data changes.

StatedBeanProviderProps

interface StatedBeanProviderProps {
  types?: ClassType[];
  beans?: Array<StatedBeanType<unknown>>;
  beanProvider?: BeanProvider;
  application?: StatedBeanApplication;
}

License

MIT

Changelog

0.6.1 (2019-10-09)

Bug Fixes

• 🐛 props type in UseBeanOptions (#82) (6c46b86)