selectors added

src/components/ContactForm/ContactForm.js

@@ -10,11 +10,12 @@ import {
   colorPickerOptions,
   DEFAULT_COLOR,
 } from '../../constans/ColorConstans';
+import { contactsSelector } from '../../store/contacts/contactsSelectors';
 import style from './ContactForm.module.css';
 
 export default function ContactForm() {
   const dispatch = useDispatch();
-  const { contacts } = useSelector(state => state.contacts);
+  const { contacts } = useSelector(contactsSelector);
 
   const handleSubmit = event => {
     event.preventDefault();

src/components/ContactList/ContactList.jsx

@@ -5,12 +5,14 @@ import { BiSolidUserRectangle, BiPhone } from 'react-icons/bi';
 import ColorFilter from '../Filter/ColorFilter';
 import Notification from '../Notification';
 import { showInfo } from '../../utils/ToastNotification';
+import { contactsSelector } from '../../store/contacts/contactsSelectors';
+import { filterSelector } from '../../store/filter/filterSelector';
 import style from './ContactList.module.css';
 
 const ContactList = () => {
   const dispatch = useDispatch();
-  const { contacts } = useSelector(state => state.contacts);
-  const { nameFilter, colorFilter } = useSelector(state => state.filter);
+  const { contacts } = useSelector(contactsSelector);
+  const { nameFilter, colorFilter } = useSelector(filterSelector);
 
   const filteredContacts = contacts.filter(
     contact =>

src/components/Filter/ColorFilter.js

@@ -2,14 +2,15 @@ import { useDispatch, useSelector } from 'react-redux';
 import React, { useState } from 'react';
 import { setColorFilterAction } from '../../store/filter/filterSlice';
 import { DEFAULT_COLOR } from '../../constans/ColorConstans';
+import { contactsSelector } from '../../store/contacts/contactsSelectors';
 
 import style from './Filter.module.css';
 
 const ColorFilter = () => {
   const dispatch = useDispatch();
-  const [activeColor, setActiveColor] = useState('');
+  const { contacts } = useSelector(contactsSelector);
 
-  const { contacts } = useSelector(state => state.contacts);
+  const [activeColor, setActiveColor] = useState('');
 
   const uniqueColors = [...new Set(contacts.map(contact => contact.color))];
 
@@ -35,7 +36,7 @@ const ColorFilter = () => {
         type={'button'}
         value={''}
         className={makeActiveButtonClass('')}
-        onClick={event => handleColorFilter(event)}
+        onClick={handleColorFilter}
       >
         All
         {contacts.length > 0 && <span>({contacts.length})</span>}
@@ -50,7 +51,7 @@ const ColorFilter = () => {
               value={`${color}`}
               style={{ backgroundColor: ` ${color}` }}
               className={makeActiveButtonClass(color)}
-              onClick={event => handleColorFilter(event)}
+              onClick={handleColorFilter}
             ></button>
           )
       )}
@@ -60,7 +61,7 @@ const ColorFilter = () => {
           style={{ backgroundColor: DEFAULT_COLOR }}
           value={DEFAULT_COLOR}
           className={makeActiveButtonClass(DEFAULT_COLOR)}
-          onClick={event => handleColorFilter(event)}
+          onClick={handleColorFilter}
         >
           Other
         </button>

src/store/contacts/contactsSelectors.js

@@ -0,0 +1 @@
+export const contactsSelector = state => state.contacts;

src/store/filter/filterSelector.js

@@ -0,0 +1 @@
+export const filterSelector = state => state.filter;