React Immer Hooks: Dễ dàng Viết React Hooks Bất biến với Immer

React Immer Hooks

Dễ dàng bảo toàn tính không biến đổi tại React Hooks với Immer.

Chú ý: Hiện tại React Hooks là một RFC proposal có thể sẽ thay đổi. Bạn cần sử dụng ít nhất_react@16.7.0-alpha.0_ để sử dụng tính năng này.

Cài đặt

yarn add react-immer-hooks

Sử dụng

useImmerState(trạng thái ban đầu)

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, trạng thái ban đầu)

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>
    
  )
}

Chi tiết tải về:

Tác giả: sin
Nguồn: https://github.com/sin/react-immer-hooks

Giấy phép: MIT license

Cảm ơn bạn!