Search products located in reduce react

#1

Hello guys. I have some of the product reducers where I add new products every day. Like:

import {v4} from 'node-uuid';
import soap from './img/soap.jpg';
import like from './img/like.svg';
const initialState = {
 products: [
{
  id: v4(),
  title: "Жидкое мыло 250мл.",
  description: "TM",
  price: 20,
  image: soap,
  amount: 1000,
  cls: "soap",
  productName: "Жидкое мыло 250мл.",
  heart: like
},

 {
  id: v4(),
  title: "Жидкое мыло турецкое 250мл.",
  description: "Turkey soap",
  price: 20,
  image: soap,
  amount: 1000,
  cls: "soap",
  productName: "Жидкое мыло турецкое 250мл.",
  heart: like
 },

{
id: v4(),
title: "Жидкое мыло india 250мл.",
description: "India soap",
price: 20,
image: soap,
amount: 1000,
cls: "soap",
productName: "Жидкое мыло india 250мл.",
heart: like
},

{
id: v4(),
title: "asg",
description: "India soap",
price: 20,
image: soap,
amount: 1000,
cls: "soap",
productName: "asfg",
heart: like
},

{
id: v4(),
title: "dsgasg",
description: "India soap",
price: 20,
image: soap,
amount: 1000,
cls: "soap",
productName: "dsgdasfg",
heart: like
},

{
id: v4(),
title: "asdfg123",
description: "India soap",
price: 123,
image: soap,
amount: 1000,
cls: "soap",
productName: "dfgh",
heart: like
},

{
id: v4(),
title: "asdfg123",
description: "India soap",
price: 123,
image: soap,
amount: 1000,
cls: "soap",
productName: "dfgh",
heart: like
}
]
}

const soapReducer = (state = initialState, action) => {
 return state;
};


export default soapReducer;

And some others. I combined them all in rootReducer. So this is my header navigation component where I have input that should search those products.

import React, { Component } from 'react';
import Button from '../../UI/Button/Button';
import Input from '../../UI/Input/Input';
import './HeaderNav.scss';
import logo from './logo.svg';
import {Burger, BurgerCatalog} from '../Burger/Burger';
import MenuElems from '../Menu/Menu';
import Backdrop from '../../UI/Backdrop/Backdrop';
import Catalog from '../Catalog/Catalog';
import {NavLink} from 'react-router-dom';
import {connect} from 'react-redux';

class HeaderNav extends Component {

state = {
    menu: false,
    catalog: false,
    openMenu: false,
    soap: this.props.soap,
    search: ''
}

componentDidMount(){
    console.log(this.state.soap);
}

toggleBurgerHandler = () => {
    this.setState({
        menu: !this.state.menu,
        openMenu: !this.state.openMenu
    })
}

toggleCatalogHandler = () => {
    this.setState({
        catalog: !this.state.catalog
    })
}

burgerCloseHandler = () => {
    this.setState({
        menu: false,
        openMenu: false
    })
}

catalogCloseHandler = () => {
    this.setState({
        catalog: false
    })
}

preventScroll = () => {
    document.body.style = "overflow:hidden"
};

searchProductHandler = e => {
    console.log(e.target.value);
    console.log(this.props.onFindSoap(this.setState({search: e.target.value})));
}


render() {


    this.props.cartUpdated();
    this.props.likeUpdated();

    let total = 0;
    this.props.cart.map(item => total += item.product.price * item.quantity);

    return (
        <>
        <header className="header">
            <div className="container">
                <nav>
                    <NavLink to="/"><img src={logo} alt="logo"></img></NavLink>
                    <Button 
                        type={'header'}
                        onToggle={this.toggleCatalogHandler}
                        isOpen={this.state.catalog}>
                        <div className="header__catalog">
                            <h1>Каталог</h1>
                            <BurgerCatalog
                            onToggle={this.toggleCatalogHandler}
                            isOpen={this.state.catalog}/>
                        </div>
                    </Button>
                    <Input placeholder={'Искать на сайте...'} onChange={this.searchProductHandler} />
                    <div className="header__items">
                        <NavLink to="/liked" className="header__heart"><div>
                            {
                                this.props.like.length > 0 ? (
                                    <span>{ this.props.like.length }</span>
                                ) : 0
                            }
                            </div></NavLink>
                        <NavLink to="/cart" className="header__cart"><div>
                            {
                                this.props.cart.length > 0 ? (
                                    <span>{ this.props.cart.length }</span>
                                ) : 0
                            }
                        </div></NavLink>
                    </div>
                    <div className="header__menu">
                        <Burger 
                            onToggle={this.toggleBurgerHandler} 
                            isOpen={this.state.menu}/>
                    </div>
                </nav>
            </div>
            <MenuElems isOpen={this.state.openMenu} onClose={this.burgerCloseHandler}/>
            <Backdrop isOpen={this.state.openMenu} onClick={this.toggleBurgerHandler}/>
            
            <Catalog isOpen={this.state.catalog} />
            {this.state.menu ? this.preventScroll() : document.body.style.overflow = ""}
        </header>
        </>
    )
}
 }

const mapStateToProps = (state) => {
return {
    cart: state.cart.cart,
    cartUpdated: () => { return true },
    like: state.like.like,
    likeUpdated: () => {return true},
    soap: state.soap,
  }
 };
export default connect(mapStateToProps)(HeaderNav);

How Can I make that? Should I create a new searchReducer or what? This is the last piece of the puzzle(website). Thank you in term guys

#2