Feat : redux toolkit 기본 세팅 #34

- 문제 페이지에서 사용자가 선택하는 문제를 전역으로 관리하기 위한 redux toolkit 세팅

frontend/package.json

@@ -4,6 +4,7 @@
   "proxy": "https://api.doit-toeic.xyz",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -15,12 +16,13 @@
     "@types/styled-components": "^5.1.34",
     "axios": "^1.6.5",
     "framer-motion": "^10.17.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.2",
     "react-icons": "^4.12.0",
+    "react-redux": "^9.1.0",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.21.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react-spinners": "^0.13.8",
     "styled-components": "^6.1.6",

frontend/src/index.tsx

@@ -1,4 +1,6 @@
 import React, { Suspense, lazy } from 'react';
+import { Provider } from 'react-redux';
+import { store } from './store';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
@@ -13,9 +15,11 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <Suspense fallback={<Loading />}>
-    <BrowserRouter>
-      <LazyApp />
-    </BrowserRouter>
+    <Provider store={store}>
+      <BrowserRouter>
+        <LazyApp />
+      </BrowserRouter>
+    </Provider>
   </Suspense>,
 );
 

frontend/src/redux/_reducers/choices.ts

@@ -0,0 +1,18 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { Choice } from '../../types/Choice';
+
+interface DataState {
+  choices: Choice[];
+}
+
+const initialState: DataState = {
+  choices: [],
+};
+
+export const choicesSlice = createSlice({
+  name: 'choices',
+  initialState,
+  reducers: {},
+});
+
+export default choicesSlice.reducer;

frontend/src/redux/_reducers/rootReducer.ts

@@ -0,0 +1,10 @@
+import { combineReducers } from '@reduxjs/toolkit';
+import choices from './choices';
+
+// reducer를 모아두는 rootreducer
+const reducer = combineReducers({
+  choices,
+});
+
+export type ReducerType = ReturnType<typeof reducer>;
+export default reducer;

frontend/src/redux/hook.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from '../store';
+
+// js처럼 사용하기 위한 커스텀 hook
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

frontend/src/store.ts

@@ -0,0 +1,12 @@
+// src/redux/store.ts
+import { configureStore } from '@reduxjs/toolkit';
+import reducer from './redux/_reducers/rootReducer';
+
+export const store = configureStore({
+  reducer,
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;

frontend/src/types/Choice.ts

@@ -0,0 +1,4 @@
+export type Choice = {
+  questionIndex: number;
+  answer: string;
+};