Launch.IO is an Ultra Hip, Simple, and Fast, Time Traveling React State Management Library.

It provides the means to easily and consistently split up your application state into different services. Create actions within those services that will predictably update your application state time and time again. (Batteries and Time Travel Debugging are included.)

You probably don't need the overhead and extended features of other state management libraries. You just need Launch.IO and some good ice cream.

Simple. Fast. Tiny.

Everything you need. (Except for the ice cream.)

Installation

npm install launch.io

Getting Started

(Run the example below in CodeSandbox or locally using the example in this repository).

Create your application services (as many as you'd like!). Each service should have a name, initialState, and a set of actions.

const calculatorService = {
  name: "calculator",

  initialState: {
    value: 0,
  },

  // It is recommended that you do not mutate the incoming state; instead return a brand new state.
  actions: {
    increase: ({ state }, payload) => ({ value: state.value + payload }),
    decrease: ({ state }, payload) => ({ value: state.value - payload }),
  },
};

Initialize your React application with Launch.IO using initializeLaunch and pass your array of application services along with any options you'd like to specify.

import React from "react";
import { initializeLaunch } from "launch.io";

initializeLaunch([calculatorService], { enableTimeTravel: true });

const App = () => {
  return <div className="MyApp">...</div>;
};

export default App;

Use the Launch.IO useLaunch hook to access your services state and launch actions.

import React from "react";
import { useLaunch } from "launch.io";

const CalculatorForm = () => {
  const calculatorStep = 2;
  const state = useLaunch(({ state }) => state.calculator);
  const actions = useLaunch(({ actions }) => actions.calculator);

  return (
    <div>
      <p>Value: {state.value}</p>
      <button type="button" onClick={() => actions.increase(calculatorStep)}>
        Increase
      </button>
      <button type="button" onClick={() => actions.decrease(calculatorStep)}>
        Decrease
      </button>
    </div>
  );
};

Documentation

What do you mean?! You pretty much know the library by now. Get at it!

API Documentation

Stats

The hipness factor of this library is off the charts.

Check out the official stats.

| Category | Rating | | --------------- | -------------- | | Complexity | Ultra Simple | | Size | Ultra Tiny | | Performance | Ultra Fast | | Overall Ranking | Ultra Hip |

Reviews

This is direction that React state management libraries need to be headed in! -- Anonymous

I love ice cream. -- Anonymous

Impressive! Makes me question why have I been using other complex state management libraries when this simply gets the job done?! -- Anonymous

This library is lit and totally vibing! -- Anonymous

Dad, are you working on your library, again?! Let's play some Minecraft. -- Anonymous

More coming soon!

License

MIT