bloc-react

BLoC React

TypeScript BLoC pattern implementation for react using RxJS and heavily inspired by flutter_react - https://bloclibrary.dev

The BLoC Pattern (Business Logic Component) is a battle-tested design pattern for state management coming from Flutter and Dart. It tries to separate business logic from UI as much as possible while still being simple and flexible.

Everything revolves around subjects which are native to Dart, for JS there is a solid implementation by RxJS.

Quickstart

[TODO: Add plain JS examples]

1. Create a new Bloc/Cubit

// CounterCubit.ts
export default class CounterCubit extends Cubit<number> {
  increment = (): void => {
    this.emit(this.state + 1);
  };
}

2. Create a new BlocReact instance and export useBloc from it

// state.ts
const state = new BlocReact([new CounterCubit(0)]);
export const { useBloc } = state;

3. Use the hook to access the state and class methods

// CounterButton.tsx
import { useBloc } from "../state";

export default function CounterButton() {
  const [count, { increment }] = useBloc(CounterCubit);
  return <button onClick={() => increment()}>count is: {count}</button>;  
}

Documentation

[TODO]

BlocReact

[TODO]

Bloc

[TODO]

Cubit

[TODO]

BlocObserver

[TODO]