使用带反冲的Immer

Question

我希望获得Immer的性能优势和Recoil的状态管理，但不知道如何将useImmer的状态与useRecoilState的状态同步。

Answer 1

immer的核心是product函数，它可以高效地应用更改。

要将其与反冲一起使用，只需在setState内部使用produce，而不是useImmer。

import { RecoilState, useRecoilState } from 'recoil'
import { produce, Draft } from 'immer'
type DraftFunction<T> = (draft: Draft<T>) => void
export const useRecoilImmerState = <T>(atom: RecoilState<T>) => {
const [state, setState] = useRecoilState(atom)
return [
state,
useCallback((valOrUpdater: T | DraftFunction<T>) => 
setState(
typeof valOrUpdater === 'function'
? produce(valOrUpdater as DraftFunction<T>)
: valOrUpdater as T
), [setRecoilState])
] as const
}

这种方法与useImmer的工作方式非常相似。