chore(frontend): setup redux for state management (#70)

* chore: initial setup of redux * refactor: rename function to makeStore
Project-Dahlia · Mar 19, 2024 · 07138ce · 07138ce
1 parent 3bae500
commit 07138ce
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 1 deletion.
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -24,12 +24,14 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.0.2",
+    "@reduxjs/toolkit": "^2.2.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.334.0",
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-redux": "^9.1.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },

diff --git a/packages/frontend/src/app/StoreProvider.tsx b/packages/frontend/src/app/StoreProvider.tsx
@@ -0,0 +1,18 @@
+'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/packages/frontend/src/app/layout.tsx b/packages/frontend/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
+import StoreProvider from './StoreProvider';
 import '@/styles/globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
@@ -16,7 +17,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <StoreProvider>{children}</StoreProvider>
+      </body>
     </html>
   );
 }
diff --git a/packages/frontend/src/lib/hooks.ts b/packages/frontend/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/packages/frontend/src/lib/store.ts b/packages/frontend/src/lib/store.ts
@@ -0,0 +1,11 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+export const makeStore = () => {
+  return configureStore({
+    reducer: {}
+  });
+};
+
+export type AppStore = ReturnType<typeof makeStore>;
+export type RootState = ReturnType<AppStore['getState']>;
+export type AppDispatch = AppStore['dispatch'];