added redux to the setup (in src/ts/*), made webpack resolve also .ts files

package.json

@@ -16,6 +16,7 @@
     "@emotion/styled": "^11.10.4",
     "@hookform/resolvers": "^2.9.10",
     "@mui/material": "^5.10.9",
+    "@reduxjs/toolkit": "^1.8.6",
     "@types/jest": "^29.1.1",
     "@types/node": "^18.8.2",
     "@types/node-sass": "^4.11.3",
@@ -29,6 +30,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.38.0",
+    "react-redux": "^8.0.4",
     "react-router-dom": "^6.4.2",
     "sass": "^1.55.0",
     "sass-loader": "^13.1.0",

src/index.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { createRoot } from "react-dom/client";
-import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom";
-import { MetadataSetter, ErrorPage, Login, ForgotPassword, Reset, Transactions, AuthComponent } from "@components";
-
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { MetadataSetter, ErrorPage, Login, ForgotPassword, Reset, Transactions } from "@components";
+import { store } from '@ts/store'
+import { Provider } from 'react-redux'
 
 const router = createBrowserRouter([
   {
@@ -40,7 +41,9 @@ const router = createBrowserRouter([
 ]);
 
 createRoot(document.querySelector("#root")).render(
-  <React.StrictMode>
-    <RouterProvider router={router} />
-  </React.StrictMode>
+    <React.StrictMode>
+        <Provider store={store}>
+            <RouterProvider router={router} />
+        </Provider>
+    </React.StrictMode>
 );

src/ts/emailSlice.ts

@@ -0,0 +1,31 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import type { RootState } from '@ts/store'
+
+// Define a type for the slice state
+interface EmailState {
+  value: string
+}
+
+// Define the initial state using that type
+const initialState: EmailState = {
+  value: "",
+}
+
+export const emailSlice = createSlice({
+  name: 'email',
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  reducers: {
+    // Use the PayloadAction type to declare the contents of `action.payload`
+    set: (state, action: PayloadAction<string>) => {
+      state.value = action.payload
+    },
+  },
+})
+
+export const { set } = emailSlice.actions
+
+// Other code such as selectors can use the imported `RootState` type
+export const selectEmail = (state: RootState) => state.email.value
+
+export default emailSlice.reducer

src/ts/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from '@ts/store'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/ts/store.ts

@@ -0,0 +1,13 @@
+import { configureStore } from '@reduxjs/toolkit'
+import emailReducer  from '@ts/emailSlice';
+
+export const store = configureStore({
+  reducer: {
+      email: emailReducer
+  },
+})
+
+// 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

tsconfig.json

@@ -13,6 +13,7 @@
             "@components": ["components"],
             "@components/*": ["components/*"],
             "@scss/*": ["scss/*"],
+            "@ts/*": ["ts/*"],
         }
     }
-}
+}

webpack.config.js

@@ -57,7 +57,7 @@ module.exports = (env, argv) => {
             ]
         },
         resolve: {
-            extensions: [".tsx", ".jsx", ".js"],
+            extensions: [".tsx", ".ts", ".jsx", ".js"],
             alias: {
                 "@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
             },