writable atomWithStorage using AsyncStorage in ReactNative

[Bournegit]

What I am trying to do here is to keep some flags for my react native app and set it true and false depending on some conditions.
Here is my code

import {atom,useAtom} from 'jotai';
import { useImmerAtom } from 'jotai/immer'
import { atomWithStorage,createJSONStorage,loadable } from 'jotai/utils'
import useAuth from '../hooks/useAuth';
import analytics from '@segment/analytics-react-native'
import AsyncStorage from '@react-native-async-storage/async-storage'

const storage = createJSONStorage(() => AsyncStorage)

const userProfileAtom=loadable(atomWithStorage('userProfile',{
    hasSettledWithUPI: true,
    hasCreatedCollection: true,
    hasCreatedExpense: true,
    hasCreatedInstant: true,
    hasCreatedGroup: true,
},storage))


export const useSetIdentify=()=>{

    const [userProfile,setUserProfile]=useImmerAtom(userProfileAtom);
  
    const setIdentifyFirstTime=(type)=>{
    
        if(userProfile.state=="hasData" && userProfile.data[type]==true)
       {
    
        setUserProfile((c)=>c[type]=false);
    
       }
        

    }
return [userProfile,setIdentifyFirstTime];

}

How do i make userProfile atom writable and use it with### immer? So that I can change the flags and persist them.

[dai-shi]

loadable returns a read-only atom.

You need another atom to make it writable.

const baseAsyncAtom = atomWithStorage(...)
const readOnlyLoadableAtom = loadable(baseAsyncAtom)
export const writableLoadableAtom = atom(
  (get) => get(readOnlyLoadableAtom),
  (_get, set, arg) => set(baseAsyncAtom, arg)
)

[Bournegit]

Here is my working code

import {atom,useAtom,} from 'jotai';
import { useImmerAtom ,atomWithImmer} from 'jotai/immer'
import { atomWithStorage,createJSONStorage,loadable} from 'jotai/utils'
import AsyncStorage from '@react-native-async-storage/async-storage'
import { produce } from "immer";

const storage = createJSONStorage(() => AsyncStorage)


const userProfileAtom=atomWithStorage('userProfile',{
    hasSettledWithUPI: true,
    hasCreatedCollection: true,
    hasCreatedExpense: true,
    hasCreatedInstant: true,
    hasCreatedGroup: true,

},storage)

const readOnlyLoadableAtom = loadable(userProfileAtom)


const writableLoadableAtom = atom(
  (get) => get(readOnlyLoadableAtom),
  async (_get, set, type) =>{ 
  
    const oldAtom=_get(userProfileAtom);

  

  set(userProfileAtom,  produce(oldAtom, (v) => {
    v[type] = false;
  }))

}
)
export const useSetIdentify=()=>{


    const [userProfile,setUserProfile]=useAtom(writableLoadableAtom);

    const setIdentifyFirstTime=(type)=>{
    
        if(userProfile.state=="hasData")
       {
    
        setUserProfile(type);
    }
        

    }
return [userProfile,setIdentifyFirstTime];

}

Here i have used immer produce function separately.

How to do this using jotai immer utils ?

[dai-shi]

useImmerAtom should work like what you did previously.
withImmer should work too. But, I'd prefer produce like you did, which is more explicit.

[Bournegit]

Cool