Almost matching export.

src/renderer/src/App.tsx

@@ -7,16 +7,17 @@ import ipcTypes from "../../util/ipcTypes.json";
 import NavigationHeader from "./components/NavigationHeader/Navigationheader";
 import SignInForm from "./components/SignInForm/SignInForm";
 import { auth } from "./util/firebase";
-import {} from "react-error-boundary";
 import { ErrorBoundary } from "react-error-boundary";
 import ErrorBoundaryFallback from "./components/ErrorBoundaryFallback/ErrorBoundaryFallback";
-import Settings from "./components/Settings/Settings";
 import Home from "./components/Home/Home";
+import Settings from "./components/Settings/Settings";
+import { Provider } from "react-redux";
+import reduxStore from "./redux/redux-store";
 
 const App: React.FC = () => {
   const [user, setUser] = useState<User | null>(null);
 
-  auth.onAuthStateChanged((user) => {
+  auth.onAuthStateChanged((user: User | null) => {
     setUser(user);
     //Send back to the main process so that it knows we are authenticated.
     if (user) {
@@ -24,27 +25,30 @@ const App: React.FC = () => {
         ipcTypes.toMain.authStateChanged,
         user.toJSON()
       );
+      window.electron.ipcRenderer.send(ipcTypes.toMain.watcher.start);
     }
   });
 
   return (
-    <BrowserRouter>
-      <ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
-        <Layout>
-          {!user ? (
-            <SignInForm />
-          ) : (
-            <>
-              <NavigationHeader />
-              <Routes>
-                <Route path="/" element={<Home />} />
-                <Route path="settings" element={<Settings />} />
-              </Routes>
-            </>
-          )}
-        </Layout>
-      </ErrorBoundary>
-    </BrowserRouter>
+    <Provider store={reduxStore}>
+      <BrowserRouter>
+        <ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+          <Layout>
+            {!user ? (
+              <SignInForm />
+            ) : (
+              <>
+                <NavigationHeader />
+                <Routes>
+                  <Route path="/" element={<Home />} />
+                  <Route path="settings" element={<Settings />} />
+                </Routes>
+              </>
+            )}
+          </Layout>
+        </ErrorBoundary>
+      </BrowserRouter>
+    </Provider>
   );
 };
 

src/renderer/src/redux/app.slice.ts

@@ -0,0 +1,37 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import type { RootState } from "./redux-store";
+
+// Define a type for the slice state
+interface AppState {
+  value: number;
+}
+
+// Define the initial state using that type
+const initialState: AppState = {
+  value: 0,
+};
+
+export const appSlice = createSlice({
+  name: "counter",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  reducers: {
+    increment: (state) => {
+      state.value += 1;
+    },
+    decrement: (state) => {
+      state.value -= 1;
+    },
+    // Use the PayloadAction type to declare the contents of `action.payload`
+    incrementByAmount: (state, action: PayloadAction<number>) => {
+      state.value += action.payload;
+    },
+  },
+});
+
+export const { increment, decrement, incrementByAmount } = appSlice.actions;
+
+// Other code such as selectors can use the imported `RootState` type
+export const selectCount = (state: RootState): number => state.app.value;
+
+export default appSlice.reducer;

src/renderer/src/redux/redux-store.ts

@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit";
+import appReducer from "./app.slice";
+
+const store = configureStore({
+  reducer: { app: appReducer },
+});
+
+// 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;
+export type AppStore = typeof store;
+export default store;

src/renderer/src/redux/reduxHooks.ts

@@ -0,0 +1,8 @@
+import type { TypedUseSelectorHook } from "react-redux";
+import { useDispatch, useSelector, useStore } from "react-redux";
+import type { AppDispatch, AppStore, RootState } from "./redux-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;