firebase + redux toolkit 로그인 정보를 redux에 담는 방법

TOC

1. firebase logIn ?
2. redux toolkit을 사용하자.

우선 firebase login 방법은 노마드 코더 선생님께서 잘 알려주신 강좌가 있으니 꼭 보도록 하자.

우린 여기에 redux를 얹어 상태관리를 조금 더 타이트하게 해보려 한다.

1. firbase logIn?

우선 firebase는 쉽고 간편한 로그인 방법을 제공한다.

• sns provider를 통한 흔히 SNS 로그인
• email을 통한 로그인
• 회원가입 👉 email 로그인
  등등 다양한 로그인을 지원한다.

아무튼 redux에서 관리해야 할 state는 특히나 유저 정보이다.
유저 정보는 최상위 컴포넌트에서 받을 것이다.

유저 정보는 거의 모든 component에 뿌려지게 된다. 상태를 업데이트하기도 하고 로그아웃을 통해 상태를 끊어주기도 한다. 아주 깊숙히 들어 있는 component에게도 전달되는 user info를 redux에 담아보자.

2. redux toolkit을 사용하자.

firebase login은 firebase에서 제공하는 함수를 통해 로그인 상태인지 아닌지를 옵저빙 하다 로그인 상태면 user정보를 반환, 아니면 로그아웃 상태를 반환하는 함수가 있다.

onAUthStateChanged 함수이다.

이를 통해 로그인 상태인지 아닌지 판단할 수 있게 된다.

redux가 들어갈 부분은 바로 위 함수이다.

아래 코드는 react useState를 사용하다 redux로 전환 작업중의 onAuthStateChanged 함수의 내부를 긁어왔다.

...
  useEffect(() => {
    authService.onAuthStateChanged((user) => {
      if (user) {
        setIsLoggedIn(true);
        setUserObj({
          displayName: user.displayName,
          uid: user.uid,
          photoUrl: user.photoURL,
          updateProfile: (args) => user.updateProfile(args),
        });
        dispatch(
          setActiveUser({
            displayName: user.displayName,
            uid: user.uid,
            photoUrl: user.photoURL,
          })
        );
        console.log('after logIn, dispatch: ', store.getState().user);
      } else {
        setIsLoggedIn(false);
        dispatch(setUserLogOutState);
        console.log('redux logOut state', store.getState());
      }
      return;
    });
  }, []);
...

위 코드를 통해 알아야 할 가장 중요한 것은 언제, 어디서 redux가 들어가야 하는가이다.
만약 logIn을 비동기로 서버로부터 받는 작업이였다면 thunk나 saga를 사용해야 했을 것이다.