사용자 정보 확인하기 feat. 리덕스 훅 (useSelector, useDispatch)

사용자 정보 확인하는 법

import { useSelector } from 'react-redux';
import { RootState } from '../modules'
const LoginUser = useSelector((state:RootState) => state.login);
export type LoginUserState = {
    isLogin: boolean;
    email: string;
    name: string;
    thumbnailUrl: string;
    originUrl: string;
}

상황

• 리덕스에 로그인한 사용자 정보를 상태로 저장하고 있고, 필요한 컴포넌트에서 이를 꺼내서 쓰게 하고 싶다.

리덕스

• 리덕스 상태와 디스패치를 자식에서 사용하는 다양한 방법들이 있다.
• 부모에서 connect를 통해 자식의 prop로 매핑해주는 방법이 자주 보인다.
  • 상태를 활용할 컴포넌트의 부모에서 매핑 함수를 만들고, connect함수를 쓰는 등의 조금 귀찮은 작업이 많이 필요하다.
  • 로그인된 사용자의 정보를 가져오는 간단한 작업에 비해 코드의 변경량이 너무 많은 것 같다.
• 간단한 방법은 훅을 쓰는 것

useSelector

• 스토어의 상태를 가져온다.
• 매개변수로 전달한 함수를 통해 필요한 상태를 반환하도록 한다.

  const currentUserState = useSelector((state:RootState)=>state.login, []);

// currentUserState의 타입 
export type LoginUserState = {
    isLogin: boolean; // 로그인 여부.. 로그인이 true면, 다른 값이 있을 것을 약속한다.
    email: string;
    name: string;
    thumbnailUrl: string;
    originUrl: string;
}

useDispatch

• 디스패치 함수를 가져와서 사용할 수 있게 된다.

  const dispatch = useDispatch()
  dispatch(setuser(userState))
  /// setuser ( Action 생성자 함수 ) 
  ///

언제 만들어진거고 성능문제는 없을까 ??

• tbc (to be continued ... )

결론

• 깔끔하고 맘에 든다

출처 : react-redux 에서 Hooks 사용하기