https://github.com/h-a-n-a/use-immer-state

Use state with reactivity like immer in @reactjs
https://github.com/h-a-n-a/use-immer-state

hooks immer immutable react react-hooks typescript

Last synced: 6 months ago
JSON representation

Use state with reactivity like immer in @reactjs

• Host: GitHub
• URL: https://github.com/h-a-n-a/use-immer-state
• Owner: h-a-n-a
• Created: 2020-07-31T18:15:24.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-07-12T09:20:31.000Z (about 4 years ago)
• Last Synced: 2025-01-19T16:25:07.792Z (9 months ago)
• Topics: hooks, immer, immutable, react, react-hooks, typescript
• Language: TypeScript
• Homepage:
• Size: 23.4 KB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# use-immer-state

> 编写对象，由繁入简

## 特性

- 完整、轻量级实现 Immer 核心

- React 响应式驱动

- TypeScript 支持

## 在线体验

[![Edit](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/use-immer-state-demo-wh6dm)

## 安装

```bash

npm install use-immer-state --save

```

## 极速上手

配合 React Hooks 使用：

```tsx

import useImmerState from 'use-immer-state'

function App() {

  const [basket, updateBasket] = useImmerState({

    fruits: ['apple', 'pear']

  })

  const addOrange = () => updateBasket((draft) => {

    draft.fruits.push('orange')

  })

  return (

    <>

      fruits: {String(basket.fruits)}

      Add Orange

    >

  )

}

export default App

```

还可以只使用 `produce` 函数：

```tsx

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

const baseState = {

  fruits: ['apple', 'pear']

}

const result = produce(baseState, (draft) => {

  draft.fruits.push('orange')

})

```