1.0.1 • Published 11 months ago
react-simply-state v1.0.1
React Simply State
React bindings for simply-state, a lightweight, easy-to-use state management library for JavaScript applications.
Installation
You can install Simply State via npm:
npm install react-simply-state
Usage
Setup
Firstly, wrap your app with the Provider
component:
import { Store } from 'simply-state';
import { Provider } from 'react-simply-state';
const store = new Store({ count: 0 });
function App() {
return (
<Provider store={store}>
<Counter />
</Provider>
);
}
The Provider
component makes the state store available to all component inside of it.
useSelector
The useSelector
hook can be used to select a part of the state:
import { useSelector } from 'react-simply-state';
function Counter() {
const count = useSelector((state) => state.count);
return <div>{count}</div>;
}
useSelector
will only cause the component to re-render if the selected part of the state has changed.
useDispatch
The useDispatch
hook can be used to dispatch actions to the state:
import { useDispatch } from 'react-simply-state';
function Counter() {
const count = useSelector((state) => state.count);
const dispatch = useDispatch();
const increment = () => {
dispatch((state) => {
state.count++;
});
};
return (
<div>
{count}
<button onClick={increment}>Increment</button>
</div>
);
}
Actions are functions that receive the draft state and can mutate it directly.