react-immer

No nonsense state management with Immer and React hooks

TL;DR

index.js

import React from 'react'
import ReactDOM from 'react'

import { createStore } from 'react-immer'
import Counter from './Counter'

createStore({ count: 1 })

function App() {
  return <Counter />
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

Counter.js

/* Counter.js */

import React from 'react'
import { useImmer } from 'react-immer'

export default function Counter() {
  const [{ count }, produce] = useImmer({ count: state => state.count })

  const decrement = draft => {
    draft.count -= 1
  }

  const increment = draft => {
    draft.count += 1
  }

  return (
    <div>
      <button onClick={() => produce(decrement)}>-</button>
      <span>{count}</span>
      <button onClick={() => produce(increment)}>+</button>
    </div>
  )
}

What's cool about react-immer is that if you don't support Hooks yet, you can use it inline and it will work like a render prop. In this case, it takes two arguments, the spec object and the render function.

import { useImmer } from 'react-immer'

// ...
// useImmer(specObj, renderFn)
<div>
  {useImmer({ count: state => state.count }, ({ count }, produce) => (
    <span>
      <button onClick={() => produce(decrement)}>-</button>
      <span>{count}</span>
      <button onClick={() => produce(increment)}>+</button>
    </span>
  ))}
</div>

Or, if you don't like the syntax, you can always use the Immer component

import { Immer } from 'react-immer'
// ...

<Immer spec={{ count: state => state.count }}>
  {({ count }, produce) => (
    <span>
      <button onClick={() => produce(decrement)}>-</button>
      <span>{count}</span>
      <button onClick={() => produce(increment)}>+</button>
    </span>
  )}
</Immer>