[React][Redux] redux 세팅하기 - Typescript

앞선 포스팅에서 redux란 무엇인지에 대해 알아봤었다. 이제 react 애플리케이션에 redux를 적용시켜 보자.

참고로, 이 포스팅은 React를 활용하기만 할 뿐 redux의 세팅 방법을 위주로 작성되며 React관련 내용은 다루지 않는다. React 세팅방법 참고.

1. Redux 라이브러리 추가

# npm 사용할 경우
> npm install redux react-redux @reduxjs/toolkit

# yarn 사용할 경우
> yarn add redux react-redux @reduxjs/toolkit

redux toolkit을 같이 생성해주는데 redux를 세팅하기 위해 필요한 기능들을 포함하고 있는 라이브러리이다.

2. RootReducer 생성

// store/RootReducer.ts
import { combineReducers } from "redux";

/**
 * 모든 Reducer를 합침
 */
const rootReducer = combineReducers({
  // 생성한 reducer가 들어갈 자리
})

export default rootReducer

3. Store 생성

// store/Store.ts
import { configureStore } from '@reduxjs/toolkit';
import reducer from './RootReducer'

/**
 * redux reducers 관리 store
 */
export default configureStore({
    reducer,
});

4. Reducer 생성

// interfaces/state/AuthTokenStateInterface.ts
export interface AuthTokenStateInterface {
  accessToken: string | null;
  expirationTime: number | null;
}

// store/AuthToken.ts
import { PayloadAction, createSlice } from '@reduxjs/toolkit';
import { AuthTokenStateInterface } from '../interfaces/state/AuthTokenStateInterface';

/**
 * accessToken 관리 slice
 */
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
        },
    }
})

export const { SET_TOKEN, DELETE_TOKEN } = tokenSlice.actions;

export default tokenSlice.reducer;

이렇게 생성해준 후 2번에서 작성했던 RootReducer에 추가해준다.

// store/RootReducer.ts
import { combineReducers } from "redux";
import authTokenReducer from './AuthToken';

/**
 * 모든 Reducer를 합침
 */
const rootReducer = combineReducers({
  authTokenReducer
})

export default rootReducer;

4. main.tsx에 적용

// main.tsx
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import store from './store/Store.tsx';
import { Provider } from 'react-redux';

const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(rootElement);

root.render(
  <Provider store={store}>
  	<App />
  </Provider>
)