Фильтр поиска товаров

Всем привет. Вот уже третий день ломаю голову как бы реализовать фильтр поиска товаров в Input. Дело в том что всем мои товары находятся по категориям в reducers. Что-то вроде:

    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;

И таких reducers у меня штук 8-10, каждый по категориям. Сделано это в целях облегчения добаления товаров. Никак не могу реализовать поиск товаров, которые находятся вот в таких редьюсерах. Все эти редьюсеры объеденены в root reducer при помощи combineReducers. Подскажите пожалуйста как можно реализовать. Так же я приложу компонент навигации где находится сам инпут поиска.

    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);
    }


    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);

Быть может нужно отдельный экш создать для поиска товаров, а так же редьюсер. Буду очень рад любой помощи. Если нужно, то могу приложить репозиторий. Спасибо