a lot of ques

src/components/ContactForm/ContactForm.jsx

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import css from './ContactForm.module.css';
-import { addContact } from 'store/contactsSlice';
+import { addContact } from '../../store/operations';
 import { useDispatch, useSelector } from 'react-redux';
-import { getContacts } from 'store/selectors';
+import { selectContacts } from 'store/selectors';
 import { nanoid } from '@reduxjs/toolkit';
 
 const ContactForm = ({ onSubmit }) => {
   const dispatch = useDispatch();
-  const contacts = useSelector(getContacts);
+  const contacts = useSelector(selectContacts);
 
   const [name, setName] = useState('');
   const [number, setNumber] = useState('');

src/components/ContactItem/ContactItem.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import css from './ContactItem.module.css';
 import { useDispatch } from 'react-redux';
-import { deleteContact } from 'store/contactsSlice';
+import { deleteContact } from 'store/operations';
 
 const ContactItem = ({ contact }) => {
   const dispatch = useDispatch();
 
-  const handleDeleteContact = id => {
+  const handleDeleteContact = () => {
     dispatch(deleteContact(contact.id));
   };
 

src/components/ContactList/ContactList.jsx

@@ -1,28 +1,25 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ContactItem from 'components/ContactItem/ContactItem';
 import PropTypes from 'prop-types';
 import css from './ContactList.module.css';
 import { useDispatch, useSelector } from 'react-redux';
-import { updateFilter } from 'store/contactsSlice';
-import { getContacts, getFilter } from 'store/selectors';
+import { selectFilteredContacts } from 'store/selectors';
 import Filter from 'components/Filter/Filter';
+import { fetchContacts } from 'store/operations';
 
 const ContactList = () => {
   const dispatch = useDispatch();
-  const contacts = useSelector(getContacts);
-  const filter = useSelector(getFilter);
+  const filteredContacts = useSelector(selectFilteredContacts);
 
-  const filteredContacts = contacts.filter(contact => {
-    return contact.name.toLowerCase().includes(filter.toLowerCase());
-  });
+  useEffect(() => {
+    dispatch(fetchContacts);
+  }, [dispatch]);
 
-  const handleFilter = e => {
-    dispatch(updateFilter(e.target.value));
-  };
+  console.log('filteredContacts :>> ', filteredContacts);
 
   return (
     <div>
-      <Filter value={filter} onChange={handleFilter} />
+      <Filter />
       <ul className={css.ul}>
         {filteredContacts.map(contact => {
           return <ContactItem key={contact.id} contact={contact} />;

src/components/Filter/Filter.jsx

@@ -1,25 +1,35 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import css from './Filter.module.css';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectFilter } from 'store/selectors';
+import { updateFilter } from 'store/contactsSlice';
+
+const Filter = () => {
+  const dispatch = useDispatch();
+  const filter = useSelector(selectFilter);
+
+  const handleFilterChange = e => {
+    dispatch(updateFilter(e.target.value));
+  };
 
-const Filter = ({ value, onChange }) => {
   return (
     <div>
       FindContact
       <input
         className={css.input}
         type="text"
         placeholder="Search by name"
-        value={value}
-        onChange={onChange}
+        value={filter}
+        onChange={handleFilterChange}
       />
     </div>
   );
 };
 
-Filter.propTypes = {
-  value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
+// Filter.propTypes = {
+//   value: PropTypes.string.isRequired,
+//   onChange: PropTypes.func.isRequired,
+// };
 
 export default Filter;

src/index.js

@@ -1,17 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { PersistGate } from 'redux-persist/integration/react';
 import { App } from 'components/App/App';
 import './index.css';
 import { Provider } from 'react-redux';
-import { persistor, store } from './store/store';
+import { store } from 'store/store';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <App />
-      </PersistGate>
+      <App />
     </Provider>
   </React.StrictMode>
 );

src/store/contactsSlice.js

@@ -22,6 +22,11 @@ const handleRejected = (state, action) => {
 export const contactsSlice = createSlice({
   name: 'contacts',
   initialState,
+  reducers: {
+    updateFilter: (state, action) => {
+      state.filter = action.payload;
+    },
+  },
   extraReducers: builder => {
     builder
       // fetchContacts
@@ -53,6 +58,8 @@ export const contactsSlice = createSlice({
   },
 });
 
+export const { updateFilter } = contactsSlice.actions;
+
 export const contactsReducer = contactsSlice.reducer;
 
 // [

src/store/selectors.js

@@ -1,7 +1,18 @@
+import { createSelector } from '@reduxjs/toolkit';
+
 export const selectContacts = state => state.contacts.contacts.items;
 
 export const selectIsLoading = state => state.contacts.contacts.isLoading;
 
 export const selectError = state => state.contacts.contacts.error;
 
 export const selectFilter = state => state.contacts.filter;
+
+export const selectFilteredContacts = createSelector(
+  [selectContacts, selectFilter],
+  (contacts, filter) => {
+    return contacts.filter(contact =>
+      contact.name.toLowerCase().includes(filter.toLowerCase())
+    );
+  }
+);