React Logistics

Simple and Minimal state management library for React. Easy to debug. Built upon React Context API.

Getting Started

Install via npm

yarn add react-logistics

Create Stores

import react-logistics and create stores with buildStore() function. react-logistics supports type-safe development experience via TypeScript generics.

/* TypeScript */
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as Logistics from "react-logistics";

interface CounterState {
  counter: number;
}

const initialState: CounterState = { counter: 0 };
const StoreName = "MyCounterStore";
const option = {
  debug: {
    afterUpdate: true,
    global: true
  }
};

/* Define Store */
const counterStore = Logistics.buildStore<CounterState>(
  initialState,
  StoreName,
  option
);

Define a component which will be enhanced by withConsmer() function and increment and decrement action. Defining action is completely arbitrary and you can call store.setState() dilectly.

/* Define Actions */
const increment = (counter: number) => {
  counterStore.setState({ counter: counter += 1 });
};

const decrement = (counter: number) => {
  counterStore.setState({ counter: counter -= 1 });
};

/* By enhancing withConsumer() below, the component can access store value. */
const Counter = ({ counter }: CounterState) => (
  <div>
    <h1>{counter}</h1>
    <button
      onClick={() => {
        increment(counter);
      }}
    >
      increment
    </button>
    <button
      onClick={() => {
        decrement(counter);
      }}
    >
      decrement
    </button>
  </div>
);

/* Enhance a component with store.withConsumer() function. */
const ConnectedCounter = counterStore.withConsumer<CounterState>(Counter);

/* In order to subscribe store value, define Provider as the parent of the component which is enhanced by withConsumer(). */
const App = () => (
  <counterStore.Provider>
    <div>
      <ConnectedCounter />
    </div>
  </counterStore.Provider>
);

TypeScript Example (Full Long Example)

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as Logistics from "react-logistics";

interface CounterState {
  counter: number;
}

const initialState: CounterState = { counter: 0 };
const StoreName = "MyCounterStore";
const option = {
  debug: {
    afterUpdate: true,
    global: true
  }
};

/* Define Store */
const counterStore = Logistics.buildStore<CounterState>(
  initialState,
  StoreName,
  option
);

/* Define Actions */
const increment = (counter: number) => {
  counterStore.setState({ counter: counter += 1 });
};

const decrement = (counter: number) => {
  counterStore.setState({ counter: counter -= 1 });
};

const Counter = ({ counter }: CounterState) => (
  <div>
    <h1>{counter}</h1>
    <button
      onClick={() => {
        increment(counter);
      }}
    >
      increment
    </button>
    <button
      onClick={() => {
        decrement(counter);
      }}
    >
      decrement
    </button>
  </div>
);

/* Enhance a component with store.withConsumer function. */
const ConnectedCounter = counterStore.withConsumer<CounterState>(Counter);

const App = () => (
  <counterStore.Provider>
    <div>
      <ConnectedCounter />
    </div>
  </counterStore.Provider>
);

ReactDOM.render(<App />, document.getElementById("root") as HTMLElement);

API

buildStore(initialState: T, keyName: string, Option: Object)

import { buildStore, ReactLogisticsOption } from 'react-logistics';

const option = {
  exposeGlobal: true,
  saveHistory: true,
}

export const Todo = buildStore<TodoState>(initialState, 'MyTodoStore', option);

buildStore() method create a store. You can specify type of State via TypeScript generics and develop with type safe. React Logistics is not boud to the discipling of the "single source of the truth", and you can create store as many as you want.

Available Option

Store

created Store has these methods and properties.

Debugging from console

By exposeGlobal options to "true", store object becomes global and accessible from console. You can populate store and debug without any difficult settings or procedure.