Redux Thunk를 사용한 사용자 인증 토큰 관리 예제

18 Oct 2023

redux

Redux는 React 애플리케이션에서 상태 관리를 위한 효과적인 도구입니다. Redux Thunk는 Redux의 미들웨어로, 비동기 작업을 처리하고 액션을 디스패치할 수 있도록 도와줍니다. 이번 예제에서는 Redux Thunk를 사용하여 사용자 인증 토큰을 관리하는 방법을 알아보겠습니다.

1. 설치 및 구성

먼저, 프로젝트에 Redux 및 Redux Thunk를 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다.

npm install redux redux-thunk

Redux를 구성하기 위해 store 폴더를 생성하고, store.js 파일을 다음과 같이 작성합니다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

2. 액션 생성자

사용자 인증과 관련된 액션 및 액션 생성자를 작성합니다. 이 예제에서는 로그인과 로그아웃 액션에 대해서만 설명하도록 하겠습니다.

// actionTypes.js
export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';

// actions.js
export const login = (token) => ({
  type: LOGIN,
  payload: token
});

export const logout = () => ({
  type: LOGOUT
});

3. 리듀서

기존의 Redux 리듀서를 수정하여 사용자 인증 상태를 관리하도록 합니다.

import { LOGIN, LOGOUT } from '../actionTypes';

const initialState = {
  token: null,
  isAuthenticated: false
};

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOGIN:
      return {
        ...state,
        token: action.payload,
        isAuthenticated: true
      };
    case LOGOUT:
      return {
        ...state,
        token: null,
        isAuthenticated: false
      };
    default:
      return state;
  }
};

export default authReducer;

4. Thunk 액션 생성자

Thunk 액션 생성자를 작성하여 비동기 작업을 처리할 수 있도록 합니다. 이 예제에서는 로그인 API를 호출하여 토큰을 받아오는 작업을 수행하도록 하겠습니다.

import { login } from './actions';

export const loginUser = (username, password) => {
  return (dispatch) => {
    // API 호출 등의 비동기 작업 수행
    fetch('https://example.com/login', {
      method: 'POST',
      body: JSON.stringify({ username, password })
    })
      .then(response => response.json())
      .then(data => {
        // 로그인 성공 시 토큰을 저장하고 인증 상태를 업데이트
        dispatch(login(data.token));
      })
      .catch(error => {
        // 에러 처리 로직
        console.error('Error:', error);
      });
  };
};

5. 컴포넌트에서 사용

Redux와 연동된 컴포넌트에서 useDispatch 훅을 사용하여 Thunk 액션 생성자를 디스패치할 수 있습니다.

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { loginUser } from './thunks';

const LoginForm = () => {
  const dispatch = useDispatch();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // 로그인 액션 디스패치
    dispatch(loginUser(username, password));

    // 입력 필드 초기화
    setUsername('');
    setPassword('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginForm;

이제 Redux Thunk를 사용하여 사용자 인증 토큰을 관리하는 예제를 마쳤습니다. Redux Thunk를 사용하면 비동기 작업을 더욱 효과적으로 처리할 수 있고, 액션 생성자에서 API 호출 및 기타 비동기 작업을 처리할 수 있습니다.

참고자료: