react-sweet-state

Shared state management solution for React

State managementReact
atlassian/react-sweet-stateatlassian.github.io/react-sweet-state/react-sweet-state

README

react-sweet-state logo

react-sweet-state


The good parts of Redux and React Context in a flexible, scalable and easy to use state management solution

Philosophy


sweet-state is heavily inspired by Redux mixed with Context API concepts. It has render-prop components or hooks, connected to Store instances (defined as actions and initial state), receiving the Store state (or part of it) and the actions as a result.

Each Hook, or Subscriber, is responsible to get the instantiated Store (creating a new one with initialState if necessary), allowing sharing state across your project extremely easy.

Similar to Redux thunks, actions receive a set of arguments to get and mutate the state. The default setState implementation is similar to React setState, accepting an object that will be shallow merged with the current state. However, you are free to replace the built-in setState logic with a custom mutator implementation, like immer for instance.

Basic usage


  1. ```sh
  2. npm i react-sweet-state
  3. # or
  4. yarn add react-sweet-state
  5. ```

Creating and consuming stores


  1. ```js
  2. import { createStore, createHook } from 'react-sweet-state';

  4. const Store = createStore({
  5.   // value of the store on initialisation
  6.   initialState: {
  7.     count: 0,
  8.   },
  9.   // actions that trigger store mutation
  10.   actions: {
  11.     increment:
  12.       () =>
  13.       ({ setState, getState }) => {
  14.         // mutate state synchronously
  15.         setState({
  16.           count: getState().count + 1,
  17.         });
  18.       },
  19.   },
  20.   // optional, unique, mostly used for easy debugging
  21.   name: 'counter',
  22. });

  24. const useCounter = createHook(Store);
  25. ```

  1. ```js
  2. // app.js
  3. import { useCounter } from './components/counter';

  5. const CounterApp = () => {
  6.   const [state, actions] = useCounter();
  7.   return (
  8.     <div>
  9.       <h1>My counter</h1>
  10.       {state.count}
  11.       <button onClick={actions.increment}>+</button>
  12.     </div>
  13.   );
  14. };
  15. ```

Documentation


Check the docs website or the docs folder.

Examples


See sweet-state in action: run npm run start and then go and check each folder:

- Basic example with Flow typing http://localhost:8080/basic-flow/
- Advanced async example with Flow typing http://localhost:8080/advanced-flow/
- Advanced scoped example with Flow typing http://localhost:8080/advanced-scoped-flow/

Contributing


To test your changes you can run the examples (with npm run start).
Also, make sure you run npm run preversion before creating you PR so you will double check that linting, types and tests are fine.

Thanks


This library merges ideas from redux, react-redux, redux-thunk, react-copy-write, unstated, bey, react-apollo just to name a few.
Moreover it has been the result of months of discussions with ferborva, pksjce, TimeRaider, dpisani, JedWatson, and other devs at Atlassian.



With ❤️ from Atlassian