Ultra Hip. Ultra Simple. Ultra Tiny. Ultra Fast.
Run Demo In CodeSandboxnpm install launch.io
import React from "react";
import ReactDOM from 'react-dom';
import { initializeLaunch, useLaunch } from "launch.io";
const calculatorService = {
name: "calculator",
initialState: {
value: 0,
},
actions: {
increase: ({ state }, payload) => ({ value: state.value + payload }),
decrease: ({ state }, payload) => ({ value: state.value - payload }),
},
};
initializeLaunch([calculatorService], { enableTimeTravel: true });
const App = () => {
const calculatorStep = 2;
const state = useLaunch(({ state }) => state.calculator);
const actions = useLaunch(({ actions }) => actions.calculator);
const historyActions = useLaunch(({ actions }) => actions._history);
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>
<button type="button" onClick={() => historyActions.stepBack()}>
Rewind Time
</button>
<button type="button" onClick={() => historyActions.stepForward()}>
Fast Forward Time
</button>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('app'));
(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.)