@zedux/immer NPM

`@zedux/immer`

The official Immer integration for Zedux. This is an addon package, meaning it doesn't have any own dependencies or re-export any APIs from other packages. It uses peer dependencies instead, expecting you to download the needed packages yourself.

See the documentation for this package.

Installation

This package has a peer dependency on the @zedux/atoms package and on Immer itself. Ensure that @zedux/atoms is installed at the same version as this package:

npm install immer @zedux/atoms @zedux/immer # npm
yarn add immer @zedux/atoms @zedux/immer # yarn
pnpm add immer @zedux/atoms @zedux/immer # pnpm

The @zedux/react package already includes @zedux/atoms. To use Immer in React apps, install this package alongside @zedux/react instead:

npm install immer @zedux/react @zedux/immer # npm
yarn add immer @zedux/react @zedux/immer # yarn
pnpm add immer @zedux/react @zedux/immer # pnpm

Usage

See the Zedux docs for full usage details.

Simple example:

import { injectImmerStore } from '@zedux/immer'
import { api, atom } from '@zedux/react'

const loginFormAtom = atom('loginForm', () => {
  const store = injectImmerStore({ email: '', password: '' })

  return api(store).setExports({ produce: store.produce })
})

function LoginForm() {
  const [state, { produce }] = useAtomState(loginFormAtom)

  return (
    <>
      <input
        onChange={event =>
          produce(state => {
            state.email = event.target.value
          })
        }
        value={state.email}
      />
      <input
        onChange={event =>
          produce(state => {
            state.password = event.target.value
          })
        }
        type="password"
        value={state.password}
      />
    </>
  )
}