reactjsreact-nativerecoiljs

Question about Recoil library on React Native


The React Native Cli environment uses the recover library to manage data globally.
I just have the issue that installed recoil-persist package and add code recoilPersist and set effects_UNSTABLE property.
It is normally implemented and operated until data is managed using the recoil, but errors occur when using the recoil-persist function.
What should i do?

This is ScreenShot about errors:

enter image description here

this is the code about recoil set Code:

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';
import { DiaryType } from '../lib/type';
import { initialDiary } from './initialState';

const {persistAtom} = recoilPersist();

export const diaryState = atom<DiaryType>({
  key: 'diaryState',
  default: initialDiary,
});

export const diaryListState = atom<DiaryType[]>({
  key: 'diaryListState',
  default: [],
  effects_UNSTABLE: [persistAtom],
});

Solution

  • The error is coming because local storage is a browser property. Since you are using react-native. Local storage will throw an error.

    I haven't tested this code, but I believe you can pass local storage from outside. Use the Async storage.

    import AsyncStorage from '@react-native-async-storage/async-storage';
    
    
    const { persistAtom } = recoilPersist({
        key: 'recoil-persist',
        storage: AsyncStorage
    })