redux-setup with a counter (#25)

Author: bhagirathpaliyal

package-lock.json

@@ -11,11 +11,13 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "1.1.0",
+    "@reduxjs/toolkit": "2.2.6",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "lucide-react": "0.399.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-redux": "9.1.2",
     "react-router-dom": "6.24.0",
     "tailwind-merge": "2.3.0",
     "tailwindcss-animate": "1.0.7"

package.json

@@ -1,13 +1,41 @@
 import { Button } from "@/components/ui/button";
 import { Link } from "react-router-dom";
+import { increment, decrement } from "../store/features/counter/counterSlice"; 
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../store/store"; 
 
 const LandingPage = () => {
+  const count = useSelector((state: RootState) => state.counter.count);
+  const dispatch = useDispatch();
+
   return (
     <div className="h-[100vh] flex flex-col justify-center items-center">
       <h1 className="text-[128px] font-medium-">LibraryHub</h1>
       <p className="text-[36px] font-medium">
         Your central place for all library needs
       </p>
+
+
+      <div className="flex mt-[20px] gap-[10px]">
+     <Button
+        onClick={() => dispatch(decrement())}
+        variant="outline"
+        
+      >
+        -
+      </Button> 
+      <div className="border p-[7px] rounded-[7px]">{count}</div>
+      <Button
+        onClick={() => dispatch(increment())}
+        variant="outline"
+       
+      >
+        +
+      </Button>
+
+      </div>
+      
+     
       <div className="flex gap-[20px] mt-[50px]">
         <Link to={"management/login"}>
           <Button variant="outline">Create A Library</Button>

src/Pages/LandingPage.tsx

@@ -2,9 +2,14 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import store from './store/store'
+import { Provider } from 'react-redux'
+
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
+    <Provider store={store}>
     <App />
+    </Provider>
   </React.StrictMode>,
 )

src/main.tsx

@@ -0,0 +1,23 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState={
+    count:0
+}
+
+export const counterSlice=createSlice({
+    name:'counter',
+    initialState,
+    reducers:{
+        increment:(state)=>{
+            state.count+=1;
+        },
+        decrement:(state)=>{
+            state.count-=1;
+        }
+        
+    }
+
+});
+
+export const {increment,decrement} = counterSlice.actions;
+export default counterSlice.reducer;

src/store/features/counter/counterSlice.ts

@@ -0,0 +1,14 @@
+// store.ts
+import { configureStore } from '@reduxjs/toolkit';
+import counterReducer from './features/counter/counterSlice'; // Adjust the import path if necessary
+
+const store = configureStore({
+  reducer: {
+    counter: counterReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;