Set Up Redux ToolKit

.eslintrc.cjs

@@ -23,6 +23,7 @@ module.exports = {
     'react/react-in-jsx-scope': 0,
     'import/no-extraneous-dependencies': 0,
     'import/extensions': 0,
+    'no-param-reassign': 0,
   },
   ignorePatterns: ['dist/**/*', 'postcss.config.js', 'tailwind.config.js'],
 };

src/Redux/EcommerceReducer.ts

@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+interface IsLoggedIn {
+  value: boolean;
+}
+
+const initialState: IsLoggedIn = {
+  value: false,
+};
+
+const ecommerceSlice = createSlice({
+  name: 'IsLoggedIn',
+  initialState,
+  reducers: {
+    login: (state) => {
+      state.value = true;
+    },
+  },
+});
+
+export const { login } = ecommerceSlice.actions;
+
+export default ecommerceSlice.reducer;

src/Redux/Hooks.ts

@@ -0,0 +1,5 @@
+import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/Redux/index.ts

@@ -0,0 +1,8 @@
+import { combineReducers } from '@reduxjs/toolkit';
+import ecommerceReducer from './EcommerceReducer';
+
+const rootReducer = combineReducers({
+  ecommerce: ecommerceReducer,
+});
+
+export default rootReducer;

src/Redux/store.ts

@@ -0,0 +1,11 @@
+import { configureStore } from '@reduxjs/toolkit';
+import rootReducer from './index';
+
+const store = configureStore({
+  reducer: rootReducer,
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;

src/index.css

@@ -1,3 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+* {
+  font-family: 'Lexend', sans-serif;
+}

src/main.tsx

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