chore: redux

cjeongmin · cjeongmin · commit 3c942cadd5e1 · 2024-02-24T21:46:48.000+09:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,9 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.1",
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-redux": "^9.1.0",
+    "redux": "^5.0.1",
     "sass": "^1.71.1",
     "styled-components": "^6.1.8"
   },
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import StyledComponentsRegistry from "@/lib/registry";
+import StoreProvider from "@/lib/StoreProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -18,7 +19,9 @@ export default function RootLayout({
   return (
     <html lang="ko">
       <body className={inter.className}>
-        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+        <StoreProvider>
+          <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+        </StoreProvider>
       </body>
     </html>
   );
diff --git a/src/lib/StoreProvider.tsx b/src/lib/StoreProvider.tsx
@@ -0,0 +1,20 @@
+"use client";
+import { useRef } from "react";
+import { Provider } from "react-redux";
+import { makeStore, AppStore } from "../lib/store";
+
+export default function StoreProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const storeRef = useRef<AppStore>();
+  if (!storeRef.current) {
+    // Create the store instance the first time this renders
+    storeRef.current = makeStore();
+
+    // 만약, 초기 데이터를 초기화해야한다면 이 부분에 작성한다.
+  }
+
+  return <Provider store={storeRef.current}>{children}</Provider>;
+}
diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts
@@ -0,0 +1,8 @@
+import { useDispatch, useSelector, useStore } from "react-redux";
+import type { TypedUseSelectorHook } from "react-redux";
+import type { RootState, AppDispatch, AppStore } from "./store";
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+export const useAppStore: () => AppStore = useStore;
diff --git a/src/lib/store.ts b/src/lib/store.ts
@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+export const makeStore = () => {
+  return configureStore({
+    reducer: {},
+  });
+};
+
+// Infer the type of makeStore
+export type AppStore = ReturnType<typeof makeStore>;
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<AppStore["getState"]>;
+export type AppDispatch = AppStore["dispatch"];
