Front-end (react) state management solutions

mobx-state-tree.md

Mobx-State-Tree (MST)

mobx-state-tree is a state container that combines the simplicity and ease of mutable data with the traceability of immutable data and the reactiveness and performance of observable data.

How???

feature/
  state/
    - index.js
  - component.jsx

state/index.js

import { types } from "mobx-state-tree"

const initState = () => ({...})
export default types.model(initState())
  .views(self => ...)
  .actions(self => ...)

component.jsx

import { observer } from 'mobx-react'
export default observer(() => ...)

Pros & Cons

Pros:

• best of both worlds (mutable & immutable)
• opinionated

Cons:

• learning curve

mobx.md

Mobx

Concepts

• state
• derivations
• actions

How???

feature/
  state/
    - index.js
  - component.js

state/index.js

import { observable, action, computed } from 'mobx'

export default class Store {
  @observable field
  @action setField(val) { this.field = val }
  @computed getField() { return this.field }
  ...
}

component.js

import { observer, inject } from 'mobx-react'

@inject('store')
@observer
export default extends React.Component {
  ...
  render() {
    const { store } = this.props
  }
}

Pros & Cons

Pros:

• separation of concerns (action/state/derivations)
• simplicity
• FRP(functional reactive programming) offers reactiveness and performance for free

Cons:

• Implicitness

react-context.md

Context API

How???

Structure

feature/
  state/
    - context.js
  - Container.jsx
  - Provider.jsx

context.js

const C = React.createContext(null)

export const Provider = props => {
  const state = {...}
  return <C.Provider value={state}r>{props.children}</C.Provider>
}

export const Consumer = props => {
  const value = React.useContext(C)
  if (value === null || typeof props.children !== 'function') throw Error(...)
  return props.children(value)
  // Or
  return <C.Consumer>{props.children}</C.Consumer>
}

Might be good enough for most cases, lots of flexibility due to react hooks

redux.md

Redux

How???

feature/
  state/
    -action.js 
    -reducer.js
    -selector.js
  -Container.jsx (requires react-redux binding)

Design constraints

• Action must contain "type" property, and be serializable
• Reducer must be pure functions and immutable

Trade-offs

• trade learning curve for traceability
• trade verbosity for explicitness

Pros & Cons

Pros:

• separation of concerns (action/reducer/selector)
• traceability
• ecosystem & tooling
• adoption rate

Cons:

• boilerplates
• global state doesn't fit all
• learning curve

unstate.md

Unstate

How???

Structure

feature/
  state/
    -container.js
  -Container.jsx
  -Provider.jsx

state/container.js

import {Container} from 'unstate'
class MyContainer extends Container {
  state = {}
  onChange = (e) => this.setState(...)
}

Container.jsx

import {Subscribe} from 'unstate'
import MyContainer from './state/container'
...
return <Subscribe to=[MyContainer]>{instance => renderSomething(instance.state)}</Subscribe>

Provider.jsx

import {Provider} from 'unstate'
import Container from './Container.jsx'
...
return <Provider><Container /></Provider>

Constraints

• Each container has to be a subclass of base container class (event emitter)

Pros & Cons

Pros:

• "Container" mimics react's setState API, similar to react mental model
• unopinionated

Cons:

• unopinionated
• "Container" introduces extra layer of complexity

---

Unstate-next

How???

Structure

feature/
  state/
    -container.js
  -Container.jsx
  -Provider.jsx

state/container.js

import { createContainer } from "unstated-next"
function useState(initialState = 0) {
  return React.useState(initialState)
  // or
  let [count, setCount] = useState(initialState)
  let decrement = () => setCount(count - 1)
  let increment = () => setCount(count + 1)
  return { count, decrement, increment }
}
export createContainer(useState)

Container.jsx

import Container from './state/container'
export default props => {
  const {state, ...} = Container.useContainer({})
  return ...
}

Provider.jsx

import {Provider} from './state/container'
import Container from './Container.jsx'
...
return <Provider><Container /></Provider>

Pros & Cons

Pros:

• just "react" (like react router 4+)
• simplicity
• unopinionated

Cons:

• unopinionated (how does it scale project/team wise)

Unsolved problems

• Data caching
• Cache invalidation
• State lifetime (global vs local)

How???

• Middlewares
• Ex zeit/swr
• etc

Recoil - A state management library for React