Portfolio


import { createSlice } from '@reduxjs/toolkit';

export interface AuthState {
  token: string;
}

const initialState: AuthState = {
  token: '',
};

export const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setAuth: (state, action) => {
      const { token } = action.payload;
      state.token = token;
    },
  },
});

src/stores/auth/slice.ts


import { authSlice } from '@/stores/auth/slice';
import * as selector from '@/stores/auth/selector';

export const authReducer = authSlice.reducer;
export const { setAuth } = authSlice.actions;

src/stores/auth/index.ts


import { combineReducers } from '@reduxjs/toolkit';

import { authReducer } from '@/stores/auth';
import { layoutReducer } from '@/stores/layout';

// 여기에 reducer 를 추가해주세요
export const reducers = combineReducers({
  auth: authReducer
});

src/stores/index.ts


const dispatch = useAppDispatch();

try {
  const rs: LoginResponseType = await login(loginRequest);
  const { token } = rs;

  dispatch(setAuth({ token }));
} catch (error) {
  console.error(error);
}


import { createSelector } from '@reduxjs/toolkit';

import { RootState } from '@/stores';
import { AuthState } from '@/stores/auth/slice';

export const authSelector = (state: RootState): AuthState => state.auth;
export const tokenSelector = (state: RootState): string => state.auth.token;

export const isLoginSelector = createSelector(tokenSelector, (token: string) =>
  Boolean(token),
);

src/stores/auth/selector.ts


import { authSlice } from '@/stores/auth/slice';
import * as selector from '@/stores/auth/selector';

export const authReducer = authSlice.reducer;
export const { setAuth } = authSlice.actions;
export const { authSelector, tokenSelector, isLoginSelector } = selector;

src/stores/auth/slice.ts


import { useAppSelector } from '@/stores/hooks';
import { isLoginSelector } from '@/stores/auth/selector';

const isLogin = useAppSelector(isLoginSelector);


import { Unsubscribe } from '@reduxjs/toolkit';

import { AppStartListening } from '@/stores';
import { setAuth } from '@/stores/auth';
import session from '@/utils/sessionStorage';
import SESSION_STORAGE from '@/consts/sessionStorage';

// setAuth action 이 수행되면, token 을 sessionStorage 에 저장하는 effect 를 정의
const onUpdateToken = ({ payload }: ReturnType<typeof setAuth>) => {
  const { token } = payload;

  session.setItem(SESSION_STORAGE.TOKEN, token);
};

// subscriptions 배열 안에 해당 action 을 startListening() 하고 난 반환값 저장
export const setupAuthListeners = (
  startListening: AppStartListening,
): Unsubscribe => {
  const subscriptions = [
    startListening({
      actionCreator: setAuth,
      effect: onUpdateToken,
    }),
  ];

  return () => {
    subscriptions.forEach((unsubscribe) => unsubscribe());
  };
};

src/stores/auth/listener.ts


const onUpdateToken = ({ payload }: ReturnType<typeof setAuth>) => {
  const { token } = payload;

  session.setItem(SESSION_STORAGE.TOKEN, token);
};


export const setupAuthListeners = (
  startListening: AppStartListening,
): Unsubscribe => {
  const subscriptions = [];

  return () => {
    subscriptions.forEach((unsubscribe) => unsubscribe());
  };
};


const subscriptions = [
  startListening({
    actionCreator: setAuth,
    effect: onUpdateToken,
  }),
];


import { Unsubscribe } from '@reduxjs/toolkit';

import { startAppListening } from '@/stores';
import { setupAuthListeners } from '@/stores/auth/listener';

// 이 listeners 배열에 추가해주시면 됩니다
const listeners = [setupAuthListeners];

export const setupListeners = (): Unsubscribe[] => {
  return listeners.map((setupListener) => setupListener(startAppListening));
};

src/stores/listeners.ts