diff --git a/src/App.tsx b/src/App.tsx
index d92d5f4..33b7da5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,25 +1,32 @@
-import React from "react";
-import { Provider } from "react-redux";
+import React, { useEffect } from "react";
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 (
-
- }
- title="My tasks"
- content={
- <>
-
-
- >
- }
- />
-
+ }
+ title="My tasks"
+ content={
+ <>
+
+
+ >
+ }
+ />
);
};
diff --git a/src/hooks.ts b/src/hooks.ts
index d35e905..ecc1f5b 100644
--- a/src/hooks.ts
+++ b/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";
diff --git a/src/index.tsx b/src/index.tsx
index cfdd49e..23d5d70 100644
--- a/src/index.tsx
+++ b/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(
-
+
+
+
,
document.getElementById("root")
);
diff --git a/src/localStorage.ts b/src/localStorage.ts
new file mode 100644
index 0000000..dd859c0
--- /dev/null
+++ b/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));
diff --git a/src/store/slices/todo.ts b/src/store/slices/todo.ts
index 9fed27e..6f7fb8c 100644
--- a/src/store/slices/todo.ts
+++ b/src/store/slices/todo.ts
@@ -3,18 +3,18 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { TaskItemT } from "../../types";
const initialState: { tasks: TaskItemT[] } = {
- tasks: [
- { done: true, id: 1, text: "hello" },
- { done: false, id: 2, text: "goodbye" },
- ],
+ tasks: [],
};
export const todoSlice = createSlice({
name: "todo",
initialState: initialState,
reducers: {
+ hydrate: (state, { payload }) => {
+ state.tasks = payload;
+ },
add: (state, { payload }: PayloadAction) => {
- 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;