Your problem is a common one, and there's not always a simple solution for it.
What redux solves:
You have 4 deeply nested SearchComponents
on your website, searching in one should trigger a search, it's the same search, but the handleSearch
function needs to be passed 4 times.
Solution:
You connect the SearchComponent
to the Redux store, using Redux to modify the AppWideState
of what's currently being searched.
Meanwhile, in your current containerComponent
, you get through the store the current search request and can trigger an AJAX request, thus you just centralized and avoided the need to pass 4 callbacks.
What redux does not solve(out of the box)
You downloaded some cool input field from the internet and want to use it in 4 places in your website, however you do not have access to the source code, and the component is not connected to redux, it seems you can't use the first approach at all, but it's only partially true. at this point you can Wrap
the downloaded component around your own wrapperComponent
- thus allowing you to use the first approach again.
Things that are not exactly supported
The first two examples assume that your searchComponents
trigger a app-wide state change that others can consume. However if you wish to limit the scope that you update, Redux is no longer a good choice.
I think it's important not to pollute the global appState with things that really only interest one component, especially if it's a parent component.
While you can connect everything to Redux removing the need for callbacks all together, it's obviously not a good design choice.
In that regard, anything that's not required in the global scope but is deeply nested, is not solved by Redux