("");
+
+ function saveNote() {
+ if(noteText.trim() === '') return;
+ const note = { text: noteText, date: new Date().toLocaleTimeString() };
+ dispatch(add(note));
+ setNoteText("");
+ }
+
+ return <>
+
+ setNoteText(e.target.value)} value={noteText} variant="outlined" size='small' />
+
+
+
+}
+
+function NoteList() {
+ type RootState = ReturnType;
+ const notes = useSelector((state: RootState) => state.notes.notes);
+
+ return <>
+
+ {
+ notes.map((note:Note, index) => )
+ }
+
+
+}
+
+export {
+ NoteAdd, NoteList
+}
\ No newline at end of file
diff --git a/src/Store.tsx b/src/Store.tsx
new file mode 100644
index 0000000..1e88780
--- /dev/null
+++ b/src/Store.tsx
@@ -0,0 +1,51 @@
+import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+type Note = {
+ text: string;
+ date: string;
+}
+
+type NoteState = {
+ notes: Note[];
+}
+
+const initialStateNote: NoteState = {
+ notes: []
+}
+
+const noteSlice = createSlice({
+ name: 'noteSlice',
+ initialState: initialStateNote,
+ reducers: {
+ add: (state, action: PayloadAction) => { state.notes.push(action.payload); return state; }
+ }
+});
+
+type User = {
+ name: string;
+ username: string;
+}
+
+const initialStateUser: User = {
+ name: "",
+ username: "",
+}
+
+const userSlice = createSlice({
+ name: 'userSlice',
+ initialState: initialStateUser,
+ reducers: {
+ set: (state, action: PayloadAction) => state = action.payload,
+ }
+});
+
+const Store = configureStore({
+ reducer: {
+ notes: noteSlice.reducer,
+ users: userSlice.reducer,
+ }
+});
+
+type AppDispatch = typeof Store.dispatch;
+
+export { Store, type AppDispatch, userSlice, noteSlice, type Note }
\ No newline at end of file
diff --git a/src/User.tsx b/src/User.tsx
new file mode 100644
index 0000000..f09a20b
--- /dev/null
+++ b/src/User.tsx
@@ -0,0 +1,41 @@
+import { Button, TextField } from '@mui/material';
+import { Store, userSlice } from './Store';
+import { useSelector, useDispatch } from 'react-redux';
+import { useEffect } from 'react';
+
+function UserBox() {
+ type AppDispatch = typeof Store.dispatch;
+ const dispatchUser = useDispatch();
+
+ useEffect(() => {
+ fetch('https://jsonplaceholder.typicode.com/users/10')
+ .then(response => response.json())
+ .then(data => {
+ const { set } = userSlice.actions;
+ let user = { name: data.name, username: data.username };
+ dispatchUser(set(user));
+ });
+ }, [dispatchUser]);
+
+ function clickHandler(): void {
+ fetch('https://jsonplaceholder.typicode.com/users/1')
+ .then(response => response.json())
+ .then(data => {
+ const { set } = userSlice.actions;
+ dispatchUser(set({ name: data.name, username: data.username }));
+ });
+ }
+
+ type RootState = ReturnType;
+ const user = useSelector((state: RootState) => state.users);
+
+ return <>
+
+
+
+
+
+
+}
+
+export { UserBox }
\ No newline at end of file