[Redux] 스토어로 로그인한 유저정보 관리하기(불러오기/삭제/변경하기)

로그인한 유저정보 가져오기

리덕스 스토어에 로그인한 유저정보를 저장해둔 뒤,
유저정보를 가져와야 하는 컴포넌트에서 useSelector를 이용해 state에서 currentUser정보를 가져온다.

import { useSelector } from 'react-redux';

function UserPanel() {
  const user = useSelector(state => state.user.currentUser)

user변수에 할당한 이 데이터는 해당 컴포넌트에서 user변수로 자유롭게 사용할 수 있다.

로그아웃하고 유저정보 지워주기

firebase에서 로그아웃 한 뒤 리덕스스토어에 남아있는 유저정보를 삭제해주어야 한다.

똑같은 방법으로 clearUser라는 액션을 정의해주되,
user state을 null로 변경해주면된다.

데이터 수정시 데이터 변경하기

firebase에서 프로필 데이터와 변경한 데이터를 반영해 수정해주고,
리덕스 스토어에서는 로그인한 유저정보와 관련된 데이터를 수정해준다.
프로필 이미지를 변경했을 경우를 생각해보자.

case SET_PHOTO_URL:
	return {
      ...state,
      currentUser: {...state.currentUser, photoURL: action.payload },
      isLoading: false
    }

이렇게 다른 state은 그대로 두고 photoURL부분만 action.payload로 지정해준다.

types는

const SET_PHOTO_URL = 'clear_user';

function setPhotoURL(photoURL) {
  return {
    type: SET_PHOTO_URL,
    payload: photoURL
  }
}

이 setPhotoURL의 payload는 photoURL이므로, 지정한대로 사진 이미지 경로만 변경해줄 수 있다.