React SPA architecture questions

Question

I'm not sure if my React SPA (Account Info & Settings page) architecture is correct. Could you give some feedback on this?

1. Created a Wrapper Component. It's used for holding state and calling Rest API methods to update its state. I decided to keep only a single app state in the outer-most parent.

2. Other components only render state props and use callbacks (e.g. on input text change) to call the Wrapper component methods to change the state.

Now I faced an issue with passing callback to nested child.

Say if I have 5 nested child components, I have to pass the same callback 5 times via props to the inner-most child, as well as props. It seems broken, is there any way to avoid this?

Does Redux tend to solve such issues? Is there any enterprise standard of React app architecture?

Answer 1

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