From 6040a206aad32ab3facd0afdb415bad54b878a59 Mon Sep 17 00:00:00 2001 From: Korolenko Daria Date: Sun, 21 Jan 2024 12:17:44 +0200 Subject: [PATCH] store, slice --- package-lock.json | 72 ++++++++++++++++++++++++++++++++++---- package.json | 1 + src/components/App/App.jsx | 20 ++++++----- src/index.js | 6 +++- src/store/store.js | 11 ++++++ src/store/todoSlice.js | 21 +++++++++++ 6 files changed, 115 insertions(+), 16 deletions(-) create mode 100644 src/store/store.js create mode 100644 src/store/todoSlice.js diff --git a/package-lock.json b/package-lock.json index 1cf4a82..4c116bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,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" } @@ -3380,9 +3381,9 @@ "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==" }, "node_modules/@types/react": { - "version": "17.0.43", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz", - "integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==", + "version": "18.2.48", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.48.tgz", + "integrity": "sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -3458,6 +3459,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -11829,6 +11835,32 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-redux": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.0.tgz", + "integrity": "sha512-6qoDzIO+gbrza8h3hjMA9aq4nwVFCKFtY2iLxCtVT38Swyy2C/dJCGBXHeHLtx6qlg/8qzc2MrhOeduf5K32wQ==", + "dependencies": { + "@types/use-sync-external-store": "^0.0.3", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "@types/react": "^18.2.25", + "react": "^18.0", + "react-native": ">=0.69", + "redux": "^5.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react-native": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -13638,6 +13670,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -16956,9 +16996,9 @@ "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==" }, "@types/react": { - "version": "17.0.43", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz", - "integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==", + "version": "18.2.48", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.48.tgz", + "integrity": "sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==", "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -17034,6 +17074,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" }, + "@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -22993,6 +23038,15 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-redux": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.0.tgz", + "integrity": "sha512-6qoDzIO+gbrza8h3hjMA9aq4nwVFCKFtY2iLxCtVT38Swyy2C/dJCGBXHeHLtx6qlg/8qzc2MrhOeduf5K32wQ==", + "requires": { + "@types/use-sync-external-store": "^0.0.3", + "use-sync-external-store": "^1.0.0" + } + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -24334,6 +24388,12 @@ "punycode": "^2.1.0" } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "requires": {} + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 2afff06..19ec58e 100644 --- a/package.json +++ b/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" }, diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx index 60aa2d4..6d1e0e3 100644 --- a/src/components/App/App.jsx +++ b/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 ( diff --git a/src/index.js b/src/index.js index 93e1288..c580593 100644 --- a/src/index.js +++ b/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( + - + + ); diff --git a/src/store/store.js b/src/store/store.js new file mode 100644 index 0000000..dc47725 --- /dev/null +++ b/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; + diff --git a/src/store/todoSlice.js b/src/store/todoSlice.js new file mode 100644 index 0000000..cd36af5 --- /dev/null +++ b/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; \ No newline at end of file