공부기록, 2021-08-12(recoil persist 2.x.x)

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { RecoilRoot } from "recoil"; import { recoilPersist } from 'recoil-persist' // import stay the same const { - RecoilPersist, - updateState + persistAtom } = recoilPersist( - ['count'], // no need for specifying atoms keys { key: 'recoil-persist', // configuration stay the same too storage: localStorage } ) const counterState = atom({ key: 'count', default: 0, - persistence_UNSTABLE: { // Please remove persistence_UNSTABLE from atom definition - type: 'log', - }, + effects_UNSTABLE: [persistAtom], // Please add effects_UNSTABLE key to atom definition }) function App() { const [count, setCount] = useRecoilState(counterState) return (

Counter: {count}

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { RecoilRoot } from "recoil"; import { recoilPersist } from 'recoil-persist' // import stay the same const { - RecoilPersist, - updateState + persistAtom } = recoilPersist( - ['count'], // no need for specifying atoms keys { key: 'recoil-persist', // configuration stay the same too storage: localStorage } ) const counterState = atom({ key: 'count', default: 0, - persistence_UNSTABLE: { // Please remove persistence_UNSTABLE from atom definition - type: 'log', - }, + effects_UNSTABLE: [persistAtom], // Please add effects_UNSTABLE key to atom definition }) function App() { const [count, setCount] = useRecoilState(counterState) return (

Counter: {count}

setCount(count + 1)}>Increase setCount(count - 1)}>Decrease

) } ReactDOM.render( - updateState({set})> + // Please remove updateState function from initiallizeState - // and also remove RecoilPersist component , document.getElementById('root') );

setCount(count + 1)}>Increase setCount(count - 1)}>Decrease

) } ReactDOM.render( - updateState({set})> + // Please remove updateState function from initiallizeState - // and also remove RecoilPersist component , document.getElementById('root') );