store, slice

package.json

@@ -15,6 +15,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-icons": "^4.4.0",
+    "react-redux": "^9.1.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.3"
   },

src/components/App/App.jsx

@@ -1,5 +1,9 @@
 import { nanoid } from 'nanoid';
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
+import { addTodo, getTodos } from "store/todoSlice";
+
+
+import { useDispatch, useSelector } from 'react-redux';
 
 import {
   Container,
@@ -13,29 +17,27 @@ import {
 } from 'components';
 
 export const App = () => {
-  const [todos, setTodos] = useState(
-    () => JSON.parse(localStorage.getItem('todos')) ?? []
-  );
+  const dispatch = useDispatch();
+  const todos = useSelector(getTodos);
 
   useEffect(() => {
     localStorage.setItem('todos', JSON.stringify(todos));
   }, [todos]);
 
-  const addTodo = text => {
+  const addTodos = text => {
     const todo = {
       id: nanoid(),
       text,
     };
-
-    setTodos(todos => [...todos, todo]);
+    dispatch(addTodo(todo))
   };
 
   const handleSubmit = data => {
-    addTodo(data);
+    addTodos(data);
   };
 
   const deleteTodo = id => {
-    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== id));
+    /*   setTodos(prevTodos => prevTodos.filter(todo => todo.id !== id)); */
   };
 
   return (

src/index.js

@@ -2,15 +2,19 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Global, ThemeProvider } from '@emotion/react';
 import 'modern-normalize';
+import { Provider } from "react-redux";
+import store from "store/store";
 
 import { App } from 'components';
 import { GlobalStyles, theme } from 'styles';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
+    <Provider store={store}>
     <ThemeProvider theme={theme}>
       <Global styles={GlobalStyles} />
       <App />
-    </ThemeProvider>
+      </ThemeProvider>
+    </Provider>
   </React.StrictMode>
 );

src/store/store.js

@@ -0,0 +1,11 @@
+import { configureStore } from "@reduxjs/toolkit";
+import todoSlice from "./todoSlice";
+
+const store = configureStore({
+    reducer: {
+        todos: todoSlice,
+    }
+})
+
+export default store;
+

src/store/todoSlice.js

@@ -0,0 +1,21 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const todoSlice = createSlice({
+    name: 'todos',
+    initialState: {
+        todos: [],
+    },
+    reducers: {
+        addTodo: (state, { payload }) => {
+            state.todos = [...state.todos, payload]
+        }
+    },
+    selectors: {
+        getTodos: (state) => state.todos,
+    }
+});
+
+export default todoSlice.reducer;
+
+export const { addTodo } = todoSlice.actions;
+export const { getTodos } = todoSlice.selectors;