Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/GantMan/ReactStateMuseum

A whirlwind tour of React state management systems by example
https://github.com/GantMan/ReactStateMuseum

apollo apollographql appsync appsync-sdk freactal immer microstates mobx mobx-state-tree pure-store react react-automata react-native react-observable-store redux reduxx rematch state-management unistore unstated

Last synced: 3 months ago
JSON representation

A whirlwind tour of React state management systems by example

Lists

README

        




**One Packing List App Written in:**

| Technology | React | React Native |
| ------------------------------------------------------------ | :----------------------------------------------------------: | :----------------------------------------------------------: |
| setState | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/setState) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/setState) | [](https://snack.expo.io/@vadistic/basicsetstateexample) [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/setState) |
| [React 16.x Context](https://reactjs.org/docs/context.html) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/context) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/context) | [](https://snack.expo.io/@vadistic/basiccontextexample) [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/Context) |
| [React 16.x useContext](https://reactjs.org/docs/hooks-reference.html#usecontext) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/useContext) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/useContext) |
| [Redux](https://github.com/reactjs/react-redux) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/redux) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/redux) | [](https://snack.expo.io/@vadistic/basicreduxexample) [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/Redux) |
| [MobX](https://github.com/mobxjs/mobx-react) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/mobx) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/mobx) | [](https://snack.expo.io/@vadistic/basicmobxexample) [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/MobX) |
| [unstated](https://github.com/jamiebuilds/unstated) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/unstated) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/unstated) | [](https://snack.expo.io/@vadistic/basicunstatedexample) [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/Unstated) |
| [MobX-State-Tree](https://github.com/mobxjs/mobx-state-tree) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/mobx-state-tree) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/mobx-state-tree) | [](https://snack.expo.io/@vadistic/basicmobxstatetreeexample) [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/MobXStateTree) |
| [GraphQL Apollo](https://github.com/apollographql/react-apollo) + [Amazon AppSync](https://aws.amazon.com/appsync/) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/appsync) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/appsync) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/AppSync) |
| [apollo-link-state](https://github.com/apollographql/apollo-link-state) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/apollo-link-state) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/apollo-link-state) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/ApolloLinkState) |
| setState + [react-automata](https://github.com/MicheleBertoli/react-automata) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/react-automata) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/react-automata) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/ReactAutomata) |
| [Freactal](https://github.com/FormidableLabs/freactal/) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/freactal) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/freactal) | [](https://snack.expo.io/@vadistic/basicfreactalexample) [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/Freactal) |
| [pure-store](https://github.com/gunn/pure-store) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/pure-store) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/pure-store) | [](https://snack.expo.io/@vadistic/basicpurestoreexample) [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/pure-store) |
| [ReactObservableStore](https://github.com/taviroquai/ReactObservableStore) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/react-observable-store) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/react-observable-store) | [](https://snack.expo.io/@vadistic/basicreactobservablestoreexample) [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/ReactObservableStore) |
| [react-easy-state](https://github.com/solkimicreb/react-easy-state) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/react-easy-state) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/react-easy-state) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/ReactEasyState) |
| [rematch](https://github.com/rematch/rematch) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/rematch) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/rematch) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/Rematch) |
| [unistore](https://github.com/developit/unistore) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/unistore) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/unistore) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/Unistore) |
| [Microstates](https://github.com/microstates/microstates.js/) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/microstates) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/microstates) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/microstates) |
| [react-recontext](https://github.com/minhtc/react-recontext) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/react-recontext) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/react-recontext) | [](https://snack.expo.io/@minhtc/react-recontext-demo) [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/react-recontext) |
| [remx](https://github.com/wix/remx) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/remx) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/remx) | Coming Soon - Contribute Here? |
| [simple-remx](https://github.com/wix/remx) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/simple-remx) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/simple-remx) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/simple-remx) |
| [constate](https://github.com/diegohaz/constate) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/constate) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/constate) | [](https://snack.expo.io/@willcaul/basicconstateexample) [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/Constate) |
| [controllerim](https://github.com/Niryo/controllerim) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/controllerim) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/controllerim) | Coming Soon - Contribute Here? |
| [immer](https://github.com/mweststrate/immer) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/immer) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/immer) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/immer) |
| [parket](https://github.com/ForsakenHarmony/parket) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/parket) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/parket) | Coming Soon - Contribute Here? |
| [react-contextual](https://github.com/drcmda/react-contextual) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/react-contextual) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/react-contextual) | Coming Soon - Contribute Here? |
| [react-copy-write](https://github.com/aweary/react-copy-write) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/react-copy-write) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/react-copy-write) | Coming Soon - Contribute Here? |
| [react-simplified](https://gitlab.com/eidheim/react-simplified) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/react-simplified) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/react-simplified) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/react-simplified) |
| [reim](https://github.com/IniZio/reim) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/reim) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/reim) | Coming Soon - Contribute Here? |
| [React 16.x Context](https://reactjs.org/docs/context.html) + [Redux](https://github.com/reactjs/react-redux) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/redux-and-context) | Coming Soon - Contribute Here? |
| [ReComponent](https://github.com/philipp-spiess/react-recomponent) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/react-recomponent) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/react-recomponent) | Coming Soon - Contribute Here? |
| [undux](https://github.com/bcherny/undux) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/undux) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/undux) | Coming Soon - Contribute Here? |
| [React 16.7.0-alpha useState Hook](https://reactjs.org/docs/hooks-overview.html) | [](https://codesandbox.io/s/31420no9pq) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/useState) | [](https://github.com/GantMan/ReactStateMuseum/tree/master/ReactNative/useState) |
| [redux-lightweight](https://github.com/doniyor2109/redux-lightweight) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/redux-lightweight) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/redux-lightweight) | Coming Soon - Contribute Here? |
| [overmind](https://overmindjs.org/?view=react&typescript=false) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/overmind) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/overmind) | Coming Soon - Contribute Here? |
| [Venti](https://github.com/will123195/venti#readme) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/venti) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/venti) | Coming Soon - Contribute Here? |
| [Recoil](https://github.com/facebookexperimental/Recoil) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/recoil) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/recoil) | Coming Soon - Contribute Here? |
| [Effector](https://github.com/effector/effector) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/Effector/effector) [](https://github.com/GantMan/ReactStateMuseum/tree/master/Effector/effector) | Coming Soon - Contribute Here? |
| [zustand](https://zustand.surge.sh) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/zustand) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/zustand) | Coming Soon - Contribute Here? |
| [Jōtai](https://jotai.org) | [](https://codesandbox.io/s/github/GantMan/ReactStateMuseum/tree/master/React/jotai) [](https://github.com/GantMan/ReactStateMuseum/tree/master/React/jotai) | Coming Soon - Contribute Here? |

### Examples to help portray the how, why, which, pros, and cons of various state management systems in the React ecosystem.

Every app is meant to be small, simple, and the same as each other. The only difference should be the state management decisions of each. The repeated React and ReactNative app is a Packing List, with the name based on the state technology.

| Web | Native |
| ---------------------------------------------------- | ------------------------------------------------- |
| ![example gif of app](./_art/museumWeb.gif?raw=true) | ![example gif of app](./_art/museum.gif?raw=true) |

## What are the differences?

Ye honest truth here

This repo exists so you can look at the code for yourself, _OR_ check this blog post on my findings if you'd like:
* **Blog Post:** https://hackernoon.com/the-react-state-museum-a278c726315
* **Video:** https://vimeo.com/298276409

**To Run Web**
* Click the codesandbox link in the list above
* _OR_ Clone this repo, then `cd` into each folder and follow the directions in readme

**To Run Native**
* Clone this repo, then `cd` into each folder and follow the directions in readme

## Contributors



Special thanks to all the wonderful people who contributed in some way to the React State Museum

| [
Arthur Gunn](https://github.com/gunn)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=gunn "Code") [πŸ’‘](#example-gunn "Examples") | [
Jason Lengstorf](https://code.lengstorf.com)
[πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=jlengstorf "Documentation") | [
Marco Afonso](http://afonsodev.eu/)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=taviroquai "Code") [πŸ’‘](#example-taviroquai "Examples") | [
Robert DeLuca](http://robertdelu.ca)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=Robdel12 "Code") [πŸ’‘](#example-Robdel12 "Examples") | [
stereobooster](https://github.com/stereobooster)
[πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=stereobooster "Documentation") | [
Juan David Castro](http://juandc.co)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=juandc "Code") [πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=juandc "Documentation") [πŸ’‘](#example-juandc "Examples") | [
Iurii Kyrylenko](https://github.com/iurii-kyrylenko)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=iurii-kyrylenko "Code") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [
Charles Lowell](http://frontside.io)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=cowboyd "Code") | [
Jakub Wadas](https://github.com/vadistic)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=vadistic "Code") [πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=vadistic "Documentation") | [
Anton Rusinov](https://rusinovanton.github.io/personal-website/)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=RusinovAnton "Code") [πŸ’‘](#example-RusinovAnton "Examples") | [
Miklos Bertalan](https://github.com/solkimicreb)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=solkimicreb "Code") | [
Gant Laborde](http://gantlaborde.com/)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=GantMan "Code") [πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=GantMan "Documentation") [πŸ’‘](#example-GantMan "Examples") [πŸ“](#blog-GantMan "Blogposts") [⚠️](https://github.com/GantMan/ReactStateMuseum/commits?author=GantMan "Tests") | [
Tyler Reitz](https://github.com/tyler-reitz)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=tyler-reitz "Code") [πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=tyler-reitz "Documentation") | [
Daniel Zlotin](https://github.com/DanielZlotin)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=DanielZlotin "Code") [πŸ’‘](#example-DanielZlotin "Examples") [⚠️](https://github.com/GantMan/ReactStateMuseum/commits?author=DanielZlotin "Tests") |
| [
Nuno Jesus](https://github.com/nunojesus)
[🎨](#design-nunojesus "Design") | [
Alek Merani](http://alek.in)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=amerani "Code") [πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=amerani "Documentation") | [
Ole Christian Eidheim](https://gitlab.com/eidheim)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=eidheim "Code") [πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=eidheim "Documentation") | [
Haz](https://twitter.com/diegohaz)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=diegohaz "Code") | [
Stephen Mathieson](https://github.com/stephenmathieson)
[πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=stephenmathieson "Documentation") | [
Christoph Benjamin Weber](https://wetainment.com)
[πŸ›](https://github.com/GantMan/ReactStateMuseum/issues?q=author%3Akriswep "Bug reports") [πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=kriswep "Code") | [
Aaron Yoshitake](http://ayoshitake.com)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=airandfingers "Code") |
| [
IniZio](https://inizio.github.io)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=IniZio "Code") | [
Ryan Linton](http://infinite.red)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=ryanlntn "Code") | [
Joe Duran](http://www.joeduranmusic.com)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=durangatan "Code") | [
Minh Tran](https://meohack.com)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=minhtc "Code") | [
Tudor Pavel](https://github.com/tudorpavel)
[⚠️](https://github.com/GantMan/ReactStateMuseum/commits?author=tudorpavel "Tests") | [
Lubos Belak](https://github.com/hejty)
[πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=hejty "Documentation") | [
Ryan](https://github.com/chimon2000)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=chimon2000 "Code") |
| [
Niko Salminen](http://nikosalminen.com)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=Kaivosukeltaja "Code") | [
J.C. Hiatt](https://jchiatt.com)
[πŸ’‘](#example-jchiatt "Examples") | [
doniyor2109](https://twitter.com/doniyor2109)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=doniyor2109 "Code") | [
marcelkalveram](https://marcelkalveram.com/)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=marcelkalveram "Code") [πŸ€”](#ideas-marcelkalveram "Ideas, Planning, & Feedback") | [
Alex Lewis](http://blog.alexmlewis.com/)
[πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=mpaarating "Documentation") | [
Steven Langbroek](https://twitter.com/stevendotjs)
[πŸ›](https://github.com/GantMan/ReactStateMuseum/issues?q=author%3AStevenLangbroek "Bug reports") | [
Kevin](https://hsiangyu.com)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=KevinHu2014 "Code") [πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=KevinHu2014 "Documentation") |
| [
Lubos Belak](https://httpster.sk/)
[πŸ›](https://github.com/GantMan/ReactStateMuseum/issues?q=author%3Abelaklubos "Bug reports") | [
Will Schmid](https://williamschmid.com)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=will123195 "Code") [πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=will123195 "Documentation") | [
Solomon Ayoola](https://solomonayoola.com)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=ayoola-solomon "Code") [πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=ayoola-solomon "Documentation") | [
Dominik Ferber](https://www.dferber.de/)
[πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=dferber90 "Documentation") | [
Will Caulfield](https://github.com/willcaul)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=willcaul "Code") | [
Gleb](https://github.com/GlebHihoho)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=GlebHihoho "Code") [πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=GlebHihoho "Documentation") | [
Pawel Sas](https://www.linkedin.com/in/pawelsas/)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=pawelsas "Code") |
| [
Lubos Belak](https://httpster.sk/)
[πŸ›](https://github.com/GantMan/ReactStateMuseum/issues?q=author%3Ahttpstersk "Bug reports") | [
Imre Osswald](https://twitter.com/i_oss)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=ioss "Code") | [
Frontend Dev](https://github.com/msteckyefantis)
[πŸ’»](https://github.com/GantMan/ReactStateMuseum/commits?author=msteckyefantis "Code") [πŸ“–](https://github.com/GantMan/ReactStateMuseum/commits?author=msteckyefantis "Documentation") [πŸ’‘](#example-msteckyefantis "Examples") |

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!