Skip to content

Files

Latest commit

 

History

History
50 lines (44 loc) · 1.25 KB

README.md

File metadata and controls

50 lines (44 loc) · 1.25 KB

react-**sweet-state** logo react-sweet-state

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>
  );
};