Recoil을 통해 Firebase Autentication의 인증 상태를 관리하는 [전편]

개시하다

Firebase Autentication과 함께 Recoil의 Atom effects를 사용하면 인증 상태를 간단하게 관리할 수 있습니다.
이 글은 그 방법과 그에 필요한 아래의 지식을 해설하였다.

이 글

아톰 에펙트는?

Atom Effects 상세 정보

Atom Effects의 사용 예

Atom Effects 사용 시 주의점

다음 글

및 Firebase Authentication 사용 예제

Recoil이란?Tom이란?

Recoil은 React의 상태 관리 라이브러리입니다.atom는 Recoil에서 상태를 유지하는 단위입니다.
이 글은 리코일 자체에 대한 해설을 하지 않는다.
https://recoiljs.org/

Atom Effects란 무엇입니까?

atom에 대해 Atom Effects는 구성 요소에 따른 것useEffect이다.
Atom Effect를 사용하여 다음 작업을 수행할 수 있습니다.

부작용 관리

tom의 초기화

tom과 데이터 저장소의 동기화

Atom EffectsuseEffect와 달리 라이프 사이클은 어셈블리가 아니며 atom와 연관되어 있습니다.useEffect의 연결을 사용하면 다른 구성 요소를 사용할 때마다 실행되지 않습니다.atom을 초기화할 때 한 번만 실행합니다.
또한 이 기능은 Firebase Autentication을 사용하는 인증 상태 관리와 일치합니다.

Atom Effects 상세 정보

다음과 같이 정의된 경우atomeffect 속성에 여러 Atom Effects function을 설정할 수 있습니다.
atom에서 Atom Effects function을 처음 사용할 때는 한 번만 실행됩니다.
(나중에 설명한 대로 정리한 후 다시 초기화할 때 다시 실행됩니다.)

const myState = atom({
  key: 'MyKey',
  default: null,
  effects: [
    () => {
      ...effect 1...
      return () => ...cleanup effect 1...;
    },
    () => { ...effect 2... },
  ],
});

또한 Atom Effects function은 몇 가지 편리한 매개변수를 사용할 수 있습니다.특히 아래가 중요하다.

setSelf: 자신의 atom 값을 업데이트하는 함수입니다.값이나 호출 함수를 매개 변수로 삼다.

onSet:tom의 값을 바꿀 때마다 매개 변수에 추가된 호출 함수를 실행합니다.(단, 상기 setself에서 값을 업데이트한 경우 실행하지 않음)

Atom Effects 사용 예

여기에는 공식적인 간단한 사용 예로 사용 방법을 설명한다.

잠금 상태의 예

첫 번째 예는 state가 변경될 때마다 값을 Logging하는 예입니다.변경될 때마다 로그를 onSet에 출력합니다.

const currentUserIDState = atom({
  key: 'CurrentUserID',
  default: null,
  effects: [
    ({ onSet }) => {
      onSet((newID) => {
        console.debug('Current user ID:', newID);
      });
    },
  ],
});

원격 스토리지 디바이스와의 데이터 동기화 예

두 번째 예는 원격 저장과 데이터가 동기화된 예이다.myRemoteStorage 구현되지는 않았지만 외부 스토리지 디바이스에서 데이터를 추출하는 API라고 생각하십시오.trigger는 'get' | 'set'를 초기화할 때의 동작을 나타낸다.여기서 원격 데이터를 이 Tom의 값get으로 설정하는 것은 처음 사용한 동작myRemoteStorage.get(userID)일 뿐이다.
또한myRemoteStorage.onChange 시작 부분에서 외부 데이터의 업데이트는 매번 보조 생방송에서 진행되며, 변경 후 tom에서 새로운 값을 설정한다.이런 비동기 처리도 가능하다.
마지막return은 외부 데이터의 감시를 취소하는 함수를 되돌려줍니다.Atom Effects function은 정리에 사용되는 함수를 반환합니다.이 정리 함수에 불이 붙는 조건은 뒤에 서술할 것입니다.

const syncStorageEffect =
  (userID) =>
  ({ setSelf, trigger }) => {
    // Initialize atom value to the remote storage state
    if (trigger === 'get') {
      // Avoid expensive initialization
      setSelf(myRemoteStorage.get(userID)); // Call synchronously to initialize
    }

    // Subscribe to remote storage changes and update the atom value
    myRemoteStorage.onChange(userID, (userInfo) => {
      setSelf(userInfo); // Call asynchronously to change value
    });

    // Cleanup remote storage subscription
    return () => {
      myRemoteStorage.onChange(userID, null);
    };
  };

const userInfoState = atomFamily({
  key: 'UserInfo',
  default: null,
  effects: (userID) => [historyEffect(`${userID} user info`), syncStorageEffect(userID)],
});

주의점

비동기적으로 데이터를 동기화하는 방법은 매우 편리할 것 같지만, 주의할 점이 하나 있다.
청소 함수는 아톰 소속<RecoilRoot>이 unmount에 점화될 때만 적용되기 때문이다.
그리고 일반적인 응용 프로그램 중 <RecoilRoot> 상류는 하나이기 때문에 unmount에 걸릴 기회가 거의 없다.
앱 사용 중 보조 생중계를 해온 데이터라면 이 방법은 편리하지만, 이 방법으로 앱의 일부에만 사용된 데이터를 보조 생중계하면 사용 후에도 안사브스 위기가 발생하지 않는다는 것이다.
이것에 대해서도 몇 가지 업무 건의를 고려할 수 있지만, 그것은 따로 쓸 수도 있다.
아니면 좋은 방법 아시면 알려주세요!

Firebase Authentication 사용

인증 상태는 일반적으로 애플리케이션에서 자주 사용되는 정보이므로 Atom Effects를 사용하여 보조 생방송을 진행하는 것이 좋습니다.구체적인 방법은 며칠 안에 부기 사항을 완성할 것입니다!