gantman / reactstatemuseum

A whirlwind tour of React state management systems by example

---

One Packing List App Written in:

Technology	React	React Native
setState
React 16.x Context
React 16.x useContext
Redux
MobX
unstated
MobX-State-Tree
GraphQL Apollo + Amazon AppSync
apollo-link-state
setState + react-automata
Freactal
pure-store
ReactObservableStore
react-easy-state
rematch
unistore
Microstates
react-recontext
remx		Coming Soon - Contribute Here?
simple-remx
constate
controllerim		Coming Soon - Contribute Here?
immer
parket		Coming Soon - Contribute Here?
react-contextual		Coming Soon - Contribute Here?
react-copy-write		Coming Soon - Contribute Here?
react-simplified
reim		Coming Soon - Contribute Here?
React 16.x Context + Redux		Coming Soon - Contribute Here?
ReComponent		Coming Soon - Contribute Here?
undux		Coming Soon - Contribute Here?
React 16.7.0-alpha useState Hook
redux-lightweight		Coming Soon - Contribute Here?
overmind		Coming Soon - Contribute Here?
Venti		Coming Soon - Contribute Here?
Recoil		Coming Soon - Contribute Here?
Effector		Coming Soon - Contribute Here?
zustand		Coming Soon - Contribute Here?
Jōtai		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

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 💻 💡	Jason Lengstorf 📖	Marco Afonso 💻 💡	Robert DeLuca 💻 💡	stereobooster 📖	Juan David Castro 💻 📖 💡	Iurii Kyrylenko 💻
Charles Lowell 💻	Jakub Wadas 💻 📖	Anton Rusinov 💻 💡	Miklos Bertalan 💻	Gant Laborde 💻 📖 💡 📝 ⚠️	Tyler Reitz 💻 📖	Daniel Zlotin 💻 💡 ⚠️
Nuno Jesus 🎨	Alek Merani 💻 📖	Ole Christian Eidheim 💻 📖	Haz 💻	Stephen Mathieson 📖	Christoph Benjamin Weber 🐛 💻	Aaron Yoshitake 💻
IniZio 💻	Ryan Linton 💻	Joe Duran 💻	Minh Tran 💻	Tudor Pavel ⚠️	Lubos Belak 📖	Ryan 💻
Niko Salminen 💻	J.C. Hiatt 💡	doniyor2109 💻	marcelkalveram 💻 🤔	Alex Lewis 📖	Steven Langbroek 🐛	Kevin 💻 📖
Lubos Belak 🐛	Will Schmid 💻 📖	Solomon Ayoola 💻 📖	Dominik Ferber 📖	Will Caulfield 💻	Gleb 💻 📖	Pawel Sas 💻
Lubos Belak 🐛	Imre Osswald 💻	Frontend Dev 💻 📖 💡

This project follows the all-contributors specification. Contributions of any kind welcome!

reactstatemuseum's Issues

Add react-copy-write example

React Copy Write is an immutable React state management library. Works with Immer.

See the Demo

Add ReactObservableStore example

Hello,

It is possible to add ReactObservableStore please?
https://github.com/taviroquai/ReactObservableStore

If so, please tell me what I need to do.

Cheers

Add Cerebral example

https://cerebraljs.com/

Add zustand

https://zustand.surge.sh

Add Statery

Statery is missing: https://github.com/hmans/statery

Add xstate example

http://davidkpiano.github.io/xstate/docs/#/README

Immer react native example

The immer implementation has no RN counterpart.

Actually, I would like to work on that myself 😁

Awesome integration tests

A single command to make sure all examples work, and that if they have tests that they pass.

It could also check the Readme to make sure there are no missing links.

Sounds like some basic JavaScript and good first issue.

Is there a talk with this?

I'm hoping that this repo will also (eventually) come with a wunderbar conference-recorded talk. What say you, savage?

Add overmind

Http://Overmindjs.org

Add Alfa example

https://github.com/lsm/alfa

Add constate example

Github: https://github.com/diegohaz/constate.
Demo: https://codesandbox.io/s/7p2qv6mmq.

Snack.expo.io PLZZZZZZ!

I would love to have native examples of all the state systems in https://snack.expo.io/

This is a bit of a haul, help needed.

🧹 Get long-running tests clean

Looks like 3 React failures and 1 react-native failure.

yarn test:all is currently failing with such:

Add Undux example

undux is a simple state management for React that relies on RxJS

Add React Easy state example

Its so easy. Tutorial.

Its always the same:

import React from 'react'
import { store, view } from 'react-easy-state'

const items = store({
    allItems: [/* ...stuff */],
    addItem({ newItem }) {
        items.allItems.concat([newItem])
    }
})

const Component = view(() => (
    <div>
        <h2>{items.allItems}</h2>
        <button onClick={items.addItem("new item :D")}>Add Item</button>
    </div>
))

So, PR?

missing Relay

https://github.com/facebook/relay

Relay handles state and data fetching

we could also manage local state using client schema extensions

Add Cratebox example

Cratebox is an Opinionated State Management library modeled after mobx for no particular UI library.

Logo

Hi, first congrats for your project.
I like to contribute with graphic designs, in opensource projects, so if you need something from me like a logotype or something else just say it, Im here ready to help you.
Greetings!
Nuno Jesus

Add Easy Peasy example

https://easy-peasy.now.sh/docs/introduction/

Easy Peasy provides you with an intuitive API to quickly and easily manage the state for your React application. Batteries are included - no configuration is required to support derived state, API calls, performance optimisation, developer tools etc.

Remove reduxx

There should be no place in any of our communities for people like this:

Update Script

Keeping this museum up to date:

Would be great to have a small script that can run through and execute updtr on all the libraries to get them on the latest versions of React etc. Also, ideally a report letting us know which libraries are falling behind and failed to update.

Maintaining 20+ libs by hand is unreasonable, this script will need to exist.

Add Rematch example

Rematch is a simpler alternative to Redux. It uses react-redux for connecting react with rematch 😝. Works fine with redux-devtools.

Comparison with Redux (taken from the purpose) page:

	Redux	Rematch
simple setup ‎		‎✔
less boilerplate		‎✔
readability		‎✔
configurable	‎✔	‎✔
redux devtools	‎✔	‎✔
generated action creators	‎	‎✔
global dispatch	‎	‎✔
async	thunks	‎async/await

PR?

React/mobx example does not compile

After a yarn && yarn start

Failed to compile.

./src/Components/addItem.js
Syntax error: Unexpected token (6:0)

  4 | import { observer } from "mobx-react";
  5 |
> 6 | @observer
    | ^
  7 | export default class AddItems extends Component {
  8 |   render() {
  9 |     return (

❯❯❯❯ node -v                                                                                                                                                                       ~/C/J/R/R/mobx master
v9.11.1
❯❯❯❯ yarn --version                                                                                                                                                                ~/C/J/R/R/mobx master
1.5.1

Should I add this comic?

Or would everyone get angry? 😸

Add calmm.js

Calmm.js

I can provide a PR for this as well. 🍺

Add react-contextual example

React Contextual works with the react context API. Here a detailed explanation: https://github.com/drcmda/react-contextual/blob/master/PITFALLS.md

Add Reim example

State cannot be easier than Reim, trust me 😏.

You can use it as minimal as

import React from 'react'
import reim from 'reim'
import {context} from 'react-reim'

const {get, set} = reim({name: 'Peter'}).plugin(context())

const App = () =>
  get(s => (
    <input
      value={s.name}
      onChange={ev => set({name: ev.target.value})}
    />
  ))

or go ham and use it like Redux

import React from 'react'
import reim from 'reim'
import {connect} from 'react-reim'

// create a store
const counter = reim({count: 10})

// create a presentational component
const Counter = ({value, increment, decrement}) => (
  <div style={styles.container}>
    <button onClick={decrement}>-</button>
    <div style={styles.counter}>{value}</div>
    <button onClick={increment}>+</button>
  </div>
)

// create a container component
const ConnectedCounter = connect(
  counter,
  ({count}) => ({value: count}),
  ({set}) => ({
    increment: () => set(state => {
      state.count++
    }),
    decrement: () => set(state => {
      state.count--
    })
  })
)(Counter)

export default ConnectedCounter

So, PR?

Add Re

Add Parket example

https://github.com/ForsakenHarmony/parket

A library to manage application state, heavily inspired by mobx-state-tree

Basic example

import model from 'parket';
// model returns a "constructor" function
const Person = model('Person', { // name is used internally for serialization
  initial: () => ({
    firstname: null,
    lastname: null,
    nested: null,
  }),
  actions: state => ({
    setFirstName (first) {
      state.firstname = first; // no set state, no returns to merge, it's reactive™
    },
    setLastName (last) {
      state.lastname = last;
    },
    setNested (nested) {
      state.nested = nested;
    },
  }),
  views: state => ({
    fullname: () => `${state.firstname} ${state.lastname}`, // views are computed properties
  }),
});

// merge an object with the initial state
const instance = Person({ firstname: 'Tom' });

// you can subscribe to actions, patches (state updates) and snapshots (full state after actions)
const unsubscribe = instance.onSnapshot(console.log);

// you can unsubscribe by calling the function returned by the listener
// unsubscribe();

instance.setLastName('Clancy');

// views turn into cached getters
console.log(instance.fullname); // 'Tom Clancy'

// nested models also bubble up events to the parent
instance.setNested(Person());

instance.nested.setFirstName('wow');

// you can get a snapshot of the state at any time
// { firstname: 'Tom', lastname: 'Clancy',  nested: { firstname: 'wow', lastname: null, nested: null } }
console.log(instance.getSnapshot());

Update react-automata for React Native

The automata React Native needs updates, including its tests.
If anybody wants to help, they can take a look at #87 in which the web version was updated.

Update React-Automata

Current react-automata is very out of date, including the tests.

Come update it!

Add Controllerim example

https://github.com/Niryo/controllerim

A simple, clean and well structured state management library for react

Basic usage example

Note: This is a usage example of sharing data between parent and a direct child, but keep in mind that the child could have been a nested child and everything would have stayed the same.

Inside ParentController.js:

import { Controller } from 'controllerim';

export class ParentController extends Controller {
  constructor(compInstance) {
    super(compInstance);
    this.state = {
      message: 'hello' 
    };
  }
  getMessage() {
    return this.state.message;
  }
  setMessage(value) {
    this.state.message = value;
  }
}

Inside Parent.jsx:

import React, { Component } from 'react';
import { observer } from 'controllerim';
import { ParentController } from './ParentController';

class Parent extends Component {
  componentWillMount() {
    this.controller = new ParentController(this);
  }

  render() {
    return (
      <div>
        <h1>{this.controller.getMessage()}</h1>
        <Child/>
        <button onClick={() => this.controller.setMessage('hello world!')}>Click me to change message</button>
      </div>
    );
  }
};

export default observer(Parent);
/** 
note: If you don't want to use default export, you could export the class directly:
export const Parent = observer( class extends Component {
  ...
  }
);

*/

Inside Child.jsx:

import React, { Component } from 'react';
import { observer} from 'controllerim';
import { ChildController } from './ChildController';

class Child extends Component {
  componentWillMount() {
    this.controller = new ChildController(this);
    this.parentController = this.controller.getParentController('ParentController');
  }

  render() {
    return (
      <div>
        <span>This is a message from parent: {this.parentController.getMessage()}</span>
      </div>
    );
  }
};

export default observer(Child);

Add ReComponent example

ReComponent introduces Reason-style reducer components for React using ES6 classes.

Fix Typo in Redux Function

https://github.com/GantMan/ReactStateMuseum/blob/master/React/redux/src/Components/addItem.js#L9

Should be `mapDispatchToProps not dispath

Show how to use Freactal

Example with Freactal https://github.com/FormidableLabs/freactal

NPM lib size list?

Perhaps this awesome table on the main readme should list the NPM costs?

I'm not sure that's a fair thing to list? Just thinking it will help kill all that dead space, heh.

Properly align `apollo-link-state` to use our components

Currently, the link-state example is not aligned with using the external libs and simplified context.

Add an example of unstated

Need to show how to use https://github.com/jamiebuilds/unstated

Migrate React Observable Store to React Native

Create the React Native example of ROS

Simplify setState

setState doesn't need to store functions in state.

Remove

https://github.com/GantMan/ReactStateMuseum/blob/master/React/setState/src/index.js#L25-L26

&&

https://github.com/GantMan/ReactStateMuseum/blob/master/ReactNative/setState/App.js#L17-L18

Add Unistore example

Unistore from Jason Miller (@developit). Super easy state container for React and Preact.

Example must be something like this:

import { createStore, Provider, connect } from "unistore/full/react"

// Initial State
const store = createStore({ allItems: [/* stuff :D */] })
// Actions
const actions = store => ({
  addItem = state => ({ allItems: state.allItems.concat([/* static new stuff */]) }),
  addItemDynamically = (state, props) => {
    store.setState({ allItems: allItems.concat([props.newItem]) })
  }
})

const App = connect("allItems,otherStuff", actions)(stuff => (
    <div>
        <h2>{stuff.allItems}</h2>
        <button onClick={stuff.addItem}>Add static stuff...</button>
        <button onClick={stuff.addItemDynamically({ newItem: "Pizza!" })}>
            Add Dynamic Pizza!
        </button>
    </div>
))

render(
   <Provider store={store}>
    <App />
  </Provider>,
  window.root
)

So, PR?

Do ReduxX for React Native Example

Got reduxx in #10 - now add RN example, and update blog etc.

pure-store needs cleaning

pure-store example is a little messy. Functions are passed as props that should be accessed by smart components. Someone should refactor pure-store to fit like most other examples.

If it's passed as props, it's a simple as setState, someone can easily move the components to access the state properly.

Add Akita example

Akita is a framework agnostic state management pattern, built on top of RxJS

Add CI

With some green tests from #72 - Now connect up to CI for all PRs.

Missing freezer-js state handling

Since we're collecting all of them, there's freezer for state handling too, which is missing implementation here.

https://github.com/arqex/freezer

Add Apollo Link State example

There is a GraphQL option to manage state in a central store and render props with Apollo link state. I also have a presentation (not mine obviously): Link state is dope.

So, may I send a PR for React?

Add allcontibutors script

I'm a fan of adding this to every project.

https://github.com/kentcdodds/all-contributors

Update to React Native 0.58.3

Stumbled upon this after listening to the RN podcast. Great job @GantMan, and really pleased to see so many examples in React Native.

I realised that many of them are still on RN 0.55 though, and it might make sense to upgrade them to 0.58.3 (the latest version) as many people (including me) are now on xCode 10 and 0.55 is throwing a lot of errors.

Happy to take care of this, but first wanted to make sure it's something the community is interested in.