Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atlassian/react-sweet-state
Shared state management solution for React
https://github.com/atlassian/react-sweet-state
context-api reactjs redux state-management
Last synced: about 1 month ago
JSON representation
Shared state management solution for React
- Host: GitHub
- URL: https://github.com/atlassian/react-sweet-state
- Owner: atlassian
- License: mit
- Created: 2019-04-23T08:35:05.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-17T00:32:10.000Z (9 months ago)
- Last Synced: 2024-04-28T04:34:43.644Z (8 months ago)
- Topics: context-api, reactjs, redux, state-management
- Language: JavaScript
- Homepage: https://atlassian.github.io/react-sweet-state/
- Size: 2.32 MB
- Stars: 855
- Watchers: 72
- Forks: 55
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-state - react-sweet-state
- awesome-react-state-management - react-sweet-state - Shared state management solution for React (List)
README
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
```sh
npm i react-sweet-state
# or
yarn add react-sweet-state
```
#### Creating and consuming stores
```js
import { createStore, createHook } from 'react-sweet-state';
const Store = createStore({
// value of the store on initialisation
initialState: {
count: 0,
},
// actions that trigger store mutation
actions: {
increment:
() =>
({ setState, getState }) => {
// mutate state synchronously
setState({
count: getState().count + 1,
});
},
},
// optional, unique, mostly used for easy debugging
name: 'counter',
});
const useCounter = createHook(Store);
```
```js
// app.js
import { useCounter } from './components/counter';
const CounterApp = () => {
const [state, actions] = useCounter();
return (
My counter
{state.count}
+
);
};
```
## Documentation
Check the [docs website](https://atlassian.github.io/react-sweet-state/) or the [docs folder](docs/README.md).
## 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](https://github.com/ferborva), [pksjce](https://github.com/pksjce), [TimeRaider](https://github.com/TimeRaider), [dpisani](https://github.com/dpisani), [JedWatson](https://github.com/JedWatson), and other devs at [Atlassian](https://github.com/atlassian).
[](https://www.atlassian.com)