[React] 로그인 후 유저 정보를 Redux에 저장하기 (TypeScript)

유저가 로그인 후 유저의 정보를 리덕스에 저장하는 예제를 설명하는 글입니다.

 

이 글을 보기 전 읽으면 좋은 글

 

https://hulrud.tistory.com/101

[React] 리덕스 알아보기

 

리덕스 패키지 설치하기

먼저 리덕스 패키지를 설치합니다.

 

npm i redux @reduxjs/toolkit react-redux

 

 

유저 타입 정의하기

src에 types 디렉토리를 만들고 저장할 유저의 타입을 정의합니다.

 

export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';

export interface UserData {
    name: string
    email: string
    bio: string
    spentAmount: number
}

interface LoginSuccessAction {
    type: typeof LOGIN_SUCCESS;
    payload: UserData;
 }
  
 export type UserActionTypes = LoginSuccessAction;

 

코드에 대해서 자세하게 알아보겠습니다.

 

1. LOGIN_SUCCESS 액션 타입 정의
   • LOGIN_SUCCESS는 로그인 성공 액션을 나타내는 문자열입니다.
   • 액션 타입을 식별하기 위한 상수로 사용됩니다.
2. UserData 인터페이스 정의
   • 로그인 후 반환되는 유저 객체(데이터)의 형체를 정의합니다.
3. LoginSuccessAction 인터페이스 정의
   
   • 로그인 성공 액션 객체의 형태를 정의합니다
   • type은 액션의 유형을 나타내는 문자열입니다
   • playload는 로그인 성공 시 전달되는 사용자 데이터입니다. 
4. UserActionTypes 정의
   • UserActionTypes는 사용자와 관련된 액션 타입을 모아 놓는 유형입니다.
   • 현재는 로그인 성공 액션만 포함되어 있습니다

유저 리듀서 정의하기

src에 reducers 폴더를 만들고 userReducers.ts 파일을 만들어 다음과 같이 입력합니다.

import { LOGIN_SUCCESS, UserActionTypes, UserData } from '../types/user';

// 초기 상태 정의
const initialState: UserData | null = null;

// 리듀서 함수 정의
const userReducer = (state = initialState, action: UserActionTypes): UserData | null => {
  switch (action.type) {
    case LOGIN_SUCCESS:
      return action.payload;
    default:
      return state;
  }
};

export default userReducer;

 

코드에 대해서 자세하게 알아보겠습니다.

1. 초기 상태 정의
   • 리듀서의 초디 상태를 정의합니다
   • initialState는 UserData 또는 null 상태가 될 수 있고, null 상태로 초기화 합니다.
2. 리듀서 함수 정의
   • state는 현재 상태를 나타매녀, 초기 상태로 초기화 됩니다.
   • action은 디스패치된 액션 객체를 나타냅니다
   • switch 문을 이용하여 액션 타입에 따라 적절한 동작을 수행합니다.
     • 로그인 성공 액션이 발생하면 액션의 playload를 반환하여 사용자 데이터를 업데이트 합니다.

 

스토어 정의하기

src에 store.ts 파일을 만들고 다음 코드를 입력합니다.

import { combineReducers, createStore } from 'redux';
import userReducer from './reducers/userReducer';
import { UserData } from './types/user';

// 루트 상태 정의
export interface RootState {
  user: UserData | null;
}

// 루트 리듀서
const rootReducer = combineReducers({
  user: userReducer,
});

// 스토어 생성
const store = createStore(rootReducer);

export default store;

 

코드에 대해서 자세하게 알아보겠습니다.

 

1. 루트 상태 정의
   • RootState 인터페이스는 애플리케이션의 루트 상태를 정의합니다. 
   • user 상태는 사용자 데이터를 포함하거나 또는 null일 수 있습니다.
2. 루트 리듀서 결합
   • combineReducers 함수를 사용하여 루트 리듀서를 생성합니다. 
3. 스토어 생성
   • createStore 함수를 사용하여 스토어를 생성합니다. 
   • 루트 리듀서를 스토어에 전달합니다.

Provider 설정

App.tsx에 다음과 같이 Provider를 설정합니다.

import {Provider} from 'react-redux'

import store from './store'

export default function App() {
  return (
    <Provider store={store}>
      ...
    </Provider>
  )
}

리덕스를 사용하기 위해서는 프로바이더를 설정해야 합니다.

 

Provider 컴포넌트는 리액트 애플리케이션에 리덕스 스토어를 제공하는 역할을 합니다. 리덕스를 사용하는 리액트 애플리케이션에서는 모든 컴포넌트가 스토어에 접근하여 상태를 읽거나 업데이트 할 수 있어야 하고, 이를 가능하게 해주는 것이 Provider입니다. Provider 하위에 있는 모든 컴포넌트가 Redux에 접근할 수 있게 되는 것이죠.

 

로그인이 성공하면 유저 정보 저장하기

export default function SignIn() {
  const navigation = useNavigate()
  // 디스패치 정의
  const dispatch = useDispatch()

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleSignIn = async () => {
    try {
      const request = {
        email,
        password
      }

      const response = await axios.post(`http://localhost:8080/api/users/login`, request)
      
      // response.data에 유저의 정보가 저장되어 있음
      // response.data를 loginSuccess 액션을 통해 저장함
      dispatch(loginSuccess(response.data))
      if (response.status === 200) navigation('/home')
    } catch (error) {
      console.log(error)
    }
  }
// 코드 생략

 

• axios.post를 사용하여 서버에 로그인 요청을 보냅니다. 요청이 성공하면 서버에서 반환된 데이터를 response 변수에 저장합니다.
• dispatch 함수를 사용하여 loginSuccess 액션을 디스패치하여 Redux 스토어에 사용자 데이터를 저장합니다.

 

저장한 데이터 사용하기

리덕스에 저장한 데이터를 사용하려면 useSelector 훅을 사용합니다.

 

const user = useSelector((state: RootState) => state.user)
console.log(user)

useSelector 훅을 사용하여 Redux 스토어의 상태를 가져옵니다. 여기서는 state.user를 선택하고 있습니다. state 객체는 전체 Redux 스토어 상태를 나타내며, 여기서 user는 사용자 상태를 나타냅니다.

 

 

그럼 유저에 저장한 정보가 이렇게 나옵니다.

(isDeleted, createdAt은 제가 따로 추가한 것입니다.)

 

---

부족한 글 읽어주셔서 감사합니다.