react-immer-hooks's Introduction

React Immer Hooks

Easy immutability in React Hooks with Immer.

Note: React Hooks are currently a RFC proposal which may be subject to change. You'll need at least [email protected] to use this feature.

Installation

yarn add react-immer-hooks

Usage

useImmerState(initialState)

import { useImmerState } from 'react-immer-hooks'

const initialState = {
  clicks: 0,
  doubleClicks: 0
}

const ClickCounters = () => {
  const [ state, setState ] = useImmerState(initialState)

  const onClick = () => setState(draft => { draft.clicks++ })
  const onDoubleClick = () => setState(draft => { draft.doubleClicks++ })

  return (
    <>
      <button onClick={onClick} onDoubleClick={onDoubleClick}>
        Clics: {state.clicks}, Double clicks: {state.doubleClicks}
      </button>
    </>
  )
}

useImmerReducer(reducer, initialState)

import { useImmerReducer } from 'react-immer-hooks'

const initialState = {
  count: 0
}

const reducer = (draft, action) => {
  if (action.type === 'INCREMENT') draft.count++
  if (action.type === 'DECREMENT') draft.count--
  if (action.type === 'ADD') draft.count += action.payload
}

const Counter = () => {
  const [ state, dispatch ] = useImmerReducer(reducer, initialState)

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'INCREMENT'})}>
        Increment
      </button>
      <button onClick={() => dispatch({ type: 'DECREMENT'})}>
        Decrement
      </button>
      <button onClick={() => dispatch({ type: 'ADD', payload: 5})}>
        Add 5
      </button>
    </>
  )
}