react-soliit 🎈
Simple state management solution for React
The 'Store' is all you need
No contexts, or redux, or providers, or consumers, or subscribers, or reducers, or actions, or sagas, or thunks, or epics. None of that. Simply
- Create store(s)
- Connect to store(s)
That's it
Installation
npm install react-soliit --saveExample
Imports
import React from "react";
import { render } from "react-dom";
import StateStore, { withStores } from "react-soliit";Create the Store
const counterStore = new StateStore({ count: 0 });Create component
const Counter = function({ counterStore }) {
const increment = () =>
counterStore.setState({ count: counterStore.state.count + 1 });
const decrement = () =>
counterStore.setState({ count: counterStore.state.count - 1 });
return (
<div>
<button onClick={decrement}>-</button>
<span>{counterStore.state.count}</span>
<button onClick={increment}>+</button>
</div>
);
};Connect component with the Store
const ConnectedCounter = withStores(Counter, { counterStore });Render to DOM
render(<ConnectedCounter />, document.getElementById("root"));
using withStores HOC
The withStores HOC maps store instances to component props. This allows for the injection of mock stores during testing.
