/use-immer-state

Use state with reactivity like immer in @reactjs

Primary LanguageTypeScript

use-immer-state

编写对象，由繁入简

特性

  • 完整、轻量级实现 Immer 核心
  • React 响应式驱动
  • TypeScript 支持

在线体验

Edit

安装

npm install use-immer-state --save

极速上手

配合 React Hooks 使用：

import useImmerState from 'use-immer-state'

function App() {
  const [basket, updateBasket] = useImmerState({
    fruits: ['apple', 'pear']
  })
  const addOrange = () => updateBasket((draft) => {
    draft.fruits.push('orange')
  })
  return (
    <>
      <span>fruits: {String(basket.fruits)}</span>
      <button onClick={addOrange}>Add Orange</button>
    </>
  )
}

export default App

还可以只使用 produce 函数：

import { produce } from 'use-immer-state'

const baseState = {
  fruits: ['apple', 'pear']
}

const result = produce(baseState, (draft) => {
  draft.fruits.push('orange')
})