Taking the good parts of Redux and React Context to build a flexible, scalable and easy to use state management solution.
npm i react-sweet-state
# or
yarn add react-sweet-state
import { createStore, createSubscriber, createHook } from 'react-sweet-state';
const Store = createStore({
// value of the store on initialisation
initialState: {
count: 0
},
// actions that trigger store mutation
actions: {
increment: (by = 1) => ({ setState, getState }) => {
// mutate state syncronously
setState({
count: getState().count + by
});
}
},
// optional, mostly used for easy debugging
name: 'counter'
});
const CounterSubscriber = createSubscriber(Store);
// or
const useCounter = createHook(Store);
const CounterApp = () => {
const [state, actions] = useCounter();
return (
<div>
<h1>My counter</h1>
{state.count}
<button onClick={() => actions.increment()}>Add +1</button>
<button onClick={() => actions.increment(2)}>Add +2</button>
</div>
);
};