How to properly design a data search component, through a store?

Question

React

I made a search component that accepts table data and displays the corresponding fields.
The component has a ducks model, in which actions pass through action criteria to sagas and update the store from there.
It seems that the component turned out to be good and universal, but changes came and it was necessary to implement changes in other tables through the search + a few more side effects.
Because I didn’t work with sagas before, I did everything in a simple way. It sent props from the parent to the component and, already in componentDidUpdate , after changing the corresponding state, it called certain actions from the parent, provided that they come.
But here's the problem on the page, there can be several such components, and when the state of one component changes in componentDidUpdate, they think that the state of both components has changed, which in fact is the store, but one for all and the actual update works on both components.
Which fundamentally breaks the functionality.
Maybe there are some tips?
My hindsight suggests that instead of componentDidUpdate, you can simply track the execution of the action from the SEARCH model in the parent model in sagas, but simply importing the action from SEARCH and calling it via yeld take(...) does not give results.
Because Coda posted it a lot in a separate Gist

Answer 1

I suspect that your store is created outside the component's constructor, so it is shared with the library, but not with the component instance, because the store is created when you do the import.
1. Create a unique UID for each component instance. And already use reducers to write in state[uid]
2. Implement the wrapper class of the component and create a store inside it and pass it through.