made tasks persistent in localstorage

src/App.tsx

@@ -1,25 +1,32 @@
-import React from "react";
+import React, { useEffect } from "react";
-import { Provider } from "react-redux";
 
 import { Layout } from "./components/Layout";
 import { TodoList } from "./components/TodoList";
 import { AppBar } from "./components/AppBar";
 import { AddTask } from "./components/AddTask";
-import store from "./store";
+
+import { loadStorage } from "./localStorage";
+import { useAppDispatch } from "./hooks";
+import { hydrate } from "./store/slices/todo";
 
 export const App = () => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    const initialStorage = loadStorage();
+    if (initialStorage) dispatch(hydrate(initialStorage));
+  }, []);
+
   return (
-    <Provider store={store}>
+    <Layout
-      <Layout
+      appBar={<AppBar />}
-        appBar={<AppBar />}
+      title="My tasks"
-        title="My tasks"
+      content={
-        content={
+        <>
-          <>
+          <TodoList />
-            <TodoList />
+          <AddTask />
-            <AddTask />
+        </>
-          </>
+      }
-        }
+    />
-      />
-    </Provider>
   );
 };

src/hooks.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, useState } from "react";
+import { useState } from "react";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 
 import { AppDispatch, RootState } from "./store";

src/index.tsx

@@ -1,11 +1,18 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
 
 import { App } from "./App";
+import { saveStorage } from "./localStorage";
+import store from "./store";
+
+store.subscribe(() => saveStorage(store.getState().todo.tasks));
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
   document.getElementById("root")
 );

src/localStorage.ts

@@ -0,0 +1,15 @@
+import { TaskItemT } from "./types";
+
+const LOCAL_STORAGE_KEY = "reduxStorage";
+
+export const loadStorage = (): TaskItemT[] | undefined => {
+  try {
+    const persistedState = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (persistedState) return JSON.parse(persistedState);
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const saveStorage = (storage: TaskItemT[]) =>
+  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(storage));

src/store/slices/todo.ts

@@ -3,18 +3,18 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { TaskItemT } from "../../types";
 
 const initialState: { tasks: TaskItemT[] } = {
-  tasks: [
+  tasks: [],
-    { done: true, id: 1, text: "hello" },
-    { done: false, id: 2, text: "goodbye" },
-  ],
 };
 
 export const todoSlice = createSlice({
   name: "todo",
   initialState: initialState,
   reducers: {
+    hydrate: (state, { payload }) => {
+      state.tasks = payload;
+    },
     add: (state, { payload }: PayloadAction<string>) => {
-      const newId = state.tasks[state.tasks.length - 1]?.id ?? 0;
+      const newId = (state.tasks[state.tasks.length - 1]?.id ?? -1) + 1;
 
       state.tasks.push({
         done: false,
@@ -40,6 +40,6 @@ export const todoSlice = createSlice({
   },
 });
 
-export const { add, updateText, markDone, remove } = todoSlice.actions;
+export const { hydrate, add, updateText, markDone, remove } = todoSlice.actions;
 
 export default todoSlice.reducer;