[react-native/recoil] atom을 서버와 연동하기

recoil을 사용하면서 atom의 값을 서버의 데이터로 초기화 하고 싶다는 생각을 했다.

검색해보니 atom 대신 selector를 사용하거나, atom이 생성될 때 서버와 먼저 연결될 수 있도록 atom의 effects를 사용하면 된다!

 

참고로 recoil 공식 사이트의 데이터 동기 예제를 보면 selector를 사용하고 있다.

 

Asynchronous Data Queries | Recoil (recoiljs.org)

Asynchronous Data Queries | Recoil

Atom Effects | Recoil (recoiljs.org)

Atom Effects | Recoil

 

effects를 사용하는 방법은 간단하다. 아래와 같이 서버와 연동시키고 싶은 atom의 effects에 서버와 통신할 함수를 넣어주면 된다.

const receiveMailsEffects =
  key =>
  ({setSelf}) => {
    customAxios
      .get(`/mailList/receive`)
      .then(data => setSelf(data?.data?.data))
      .catch(err => console.log(err));
  };

export const ReceiveMailsState = atom({
  key: 'receiveMails',
  default: [],
  effects: [receiveMailsEffects('receiveMails')],
  effects_UNSTABLE: [ReactNativeRecoilPersist.persistAtom],
});