Quickstart

Here we go, lets get Blac running in under five minutes!

Overview

There are three parts to Blac:

1. Data Layer

Where the data comes from

2. The Component

Blac is based on the BLoC pattern, which stands for Business Logic Component. Think of this as a reusable component that handles state and logic.

3. The UI

Use the state to render a view.

The BLoC Pattern tries to separate the business logic from the view as much as possible and act as a broker between the UI and the Data Layer.

Hands on

Install Blac with your favorite package manager

npm i blac

Create a Cubit

A Cubit is a Business Logic Component. It is a stateful object that handles contains the current state and methods related to it.

src/state/CounterCubit.ts

import { Cubit } from 'blac';

export default class CounterCubit extends Cubit<number> {
  // define a method we can use later in our UI
  public readonly increment = (): void => {
    // Update the state with the `emit` method
    this.emit(this.state + 1);
  }
}  

Create a new Blac instance

also export the useBloc hook for later use in the react component

src/state/state.ts

import { BlacReact } from 'blac';
import CounterCubit from './CounterCubit';

// this is your global state
const state = new BlacReact([
  new CounterCubit(0)
]);  

export const { useBloc } = state;  

Use the Cubit in react

The simplest way to acess your state is with the useBloc hook, just reference the Cubit we created before.

src/components/Counter.tsx

import { useBloc } from 'src/state/state';
import CounterCubit from 'src/state/CounterCubit';

const Counter: FC = (): ReactElement => {
  // useBloc returns the [state, cubit-class] as a "tuple"
  const [state, { increment }] = useBloc(CounterCubit);
  return <button onClick={() => increment()}>Count is: {state}</button>;
}