How to create a product filter in react, if the filter and products are displayed in different components?

Question

React

Dear react + redux experts, in the process of learning react, I encountered a problem, and I don’t understand how this can be done at all, please help. The essence of the problem: react, redux and react-router are used, the "main" component (App) displays the rest of the components like this:

export default function App() {
  return (
    <BrowserRouter>
    <div>
        {/* Тут фильтры в сайдбаре */}
        <Filter />

        <Switch>
            {/* а тут в ProductsContainer выводятся сами товары */}
            <Route exact path="/" component={ProductsContainer} />
        </Switch>
    </div>
    </BrowserRouter>
  )
}

Question: how to filter products in another component when selecting characteristics in a filter?
I googled a solution without using a router that you can "link" the components of products and filters through the parent component, but I can't find a solution with a router. I ask those who know to direct in the right direction, what can be read on the topic, and in general, how correct my approach is, maybe there is a more adequate solution.

Answer 1

You need to store the state of the filters in the reducer (or reducers), and then in the components subscribe to these "pieces" using mapStateToProps. That's all)
The essence of Redux is just that you have a single state of your entire project, and wherever you are (through a router or without) - you can simply connect to the store (connect) and pull out the necessary data through mapStateToProps