react-soliit
v1.0.9
Published
Simple state management solution for React
Downloads
21
Maintainers
Readme
react-soliit :balloon:
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 --save
Example
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.