[React][Redux] redux 사용해보기 - Typescript

앞선 포스팅에서 Redux를 세팅했는데 이제 실제로 사용을 해보자.

AuthTokenReducer를 생성 했으니 로그인 로그아웃을 예로 들어보자.

// LogIn.tsx
function LogIn() {
  return (
  	<button>로그인</button>
  )
}

export default LogIn;

이렇게 빈 페이지에 로그인 버튼이 있을 때 클릭하면 로그인/로그아웃이 되도록 해보자. 이 포스팅은 redux의 사용법에 대한 포스팅이므로 로그인 로직 등은 생략하도록 하자!

const tokenSlice = createSlice({
    name: 'authToken',
    initialState: {
        accessToken: null,
        expirationTime: null
    },
    reducers: {
        SET_TOKEN: (state: AuthTokenStateInterface, action: PayloadAction<AuthTokenStateInterface>) => {
            state.accessToken = action.payload.accessToken;
            state.expirationTime = action.payload.expirationTime;
        },
        DELETE_TOKEN: (state: AuthTokenStateInterface) => {
            state.accessToken = null;
            state.expirationTime = null
        },
    }
})

앞선 포스팅에서 작성한 authTokenSlice인데 그대로 사용해 보자.

1. state 가져오기

먼저 저장된 accessToken이 있는지를 확인해야한다. 만약 저장되어 있다면 로그인된 상태고 저장되어 있지 않다면 로그아웃 상태일 것이다.

redux에 저장된 값을 가져오기 위해서는 react-redux에서 제공하는 useSelector 훅을 사용한다.

import { useSelector } from 'react-redux';

function LogIn() {
  
  // useSelector 사용하여 state값 가져오기
  const { accessToken, expirationTime } = useSelector((state: RootStateInterface) => state.authToken);
  
  const handleLogIn = () => {
  }
  
  const handleLogOut = () => {
  }
  
  return (
    <>
      {accessToken ? <>
       	<button onClick={handleLogOut}>로그아웃</button>
       </> : <>
      	<button onClick={handleLogIn}>로그인</button>
       </>
      }
    </>
  )
}

export default LogIn;

참고로 RootStateInterface는 아래와 같다.

import { AuthTokenStateInterface } from './interfaces/state/AuthTokenStateInterface';

export interface RootStateInterface {
  authToken: AuthTokenStateInterface;
}

2. state dispatch 하기

redux에서 action은 직접 실행할 수 없다. 데이터의 단방향 흐름이 깨지기 때문이다. 이해가 안된다면 redux 개념 포스팅 참고.

action은 dispatcher에게 전달되고 dispatcher가 store의 상태를 업데이트 한다.

그래서 마찬가지로 dispatch를 할 때도 직접 action을 호출하는게 아니라 react-redux에서 제공하는 useDispatch 훅을 사용해야 한다.

import { useSelector, useDispatch } from 'react-redux';
import { SET_TOKEN, DELETE_TOKEN } from './store/AuthToken'

function LogIn() {
  
  // useSelector 사용하여 state값 가져오기
  const { accessToken, expirationTime } = useSelector((state: RootStateInterface) => state.authToken);
  
  // useDispatch 사용하여 dispatcher 선언
  const dispatch = useDispatch();
  
  const handleLogIn = () => {
    const date = new Date().getTime();
    
    // 현재 시간을 accessToken으로 전달
    const accessToken = date.toString()
    
    // 15분 제한시간으로 expirationTime 전달 
    const expirationTime = date + (15 * 60 * 1000);
    
    // dispatch를 통해 AuthToken slice의 SET_TOKEN action 전달하여 실행
    dispatch(SET_TOKEN({ accessToken, expirationTime }))
  }
  
  const handleLogOut = () => {
    // dispatch를 통해 AuthToken slice의 DELETE_TOKEN action 전달하여 실행
    dispatch(DELETE_TOKEN())
  }
  
  return (
    <>
      {accessToken ? <>
       	<button onClick={handleLogOut}>로그아웃</button>
       </> : <>
      	<button onClick={handleLogIn}>로그인</button>
       </>
      }
    </>
  )
}

export default LogIn;