What is the correct organization of a react-redux application?

Question

JavaScript

Tell.
How to properly organize a react application using react redux
By type ToDo
How to implement the connection of different components?
There is a menu (not navigation, but just a set of goodies, for example, add a note) and the area itself where this note is displayed.
(As it seems to me now, these are definitely components that are not inherited from each other)
So far, only inheritance is in my head.
But if there are a lot of goodies in the menu (add a picture, a timer, a reminder, an article),
then the inheritance will go wild.
And anyway, I think this is a bad idea.
As I see it.
There are two areas (menu and desktop)
The menu, when invoked, launches a specific task component. he sends the result to the desktop and there it is stored (until the first reboot)
And more. I think to take out all the data (menu items for example) in a separate file (a kind of underserver)
Where is it better to communicate with him? I use react-redux
Import it in every file where it is needed I think is not the best option.
Assuming that the structure of the server may be different. then, logically, you need to make one component that will bring this structure into the desired form.
But in the case of redux figs it, you may need to include it in the root file. and in the case of actioncreater, load new data into the reducer....

Answer 1

I didn’t understand what kind of inheritance we are talking about, as well as the last paragraphs, the rest seems clear enough, let’s go.
Why not tie this "set of goodies" to "navigation"?
That is, "add note" -> /add, edit -> /edit/:id .. ? In any case, you yourself write about 2 areas that are on all pages, which means you must have a parent component in which the "header (whether it's a menu or not, it doesn't matter) + work area" is rendered
. idea with a router, then the approximate code will be as follows:

...
<HeaderContainer /> // (или тупой <Header />)
{ this.props.children }
...

Inside children, it goes without saying that what your routing returns, so the router code is something like this:

...
<Route path='/add' component={AddContainer} />
<Route path='/edit/:id' component={EditContainer} />
...

When I say "container" I mean (like everyone else) that it is a component that is attached to redux (i.e.

connect(mapStateToProps,mapDispatchToProps)(имя_компонента)

).
Thus, we have already solved your problem about: The menu, when called, launches a component of a specific task. that sends the result to the desktop and it is stored there , since everything in our menu is done using Link from react-router, and our workspace changes along with the browser URL. If there is a need to "drive" all clicks on the menu through ActionCreators (AC) performing some additional actions, or just "for order" - then you can use push from react-router-redux inside your AC, it usually looks like this:
If you don’t want to do an example with a react-router, then the principle will still be the same, only instead of a URL address, you must have another sign on the basis of which the workspace will be created.
---

And further. I think to take out all the data (menu items for example) in a separate file (a kind of underserver)
Where is it better to communicate with him? using react-redux

You will definitely communicate in your action creator functions, since this will be an asynchronous request for a json file, which means there can be no other place. If you omit the correct names, then your area of ​​\u200b\u200bwork with the file is actions.
---
As already mentioned, in the end I don’t understand what you are writing about ... The structure of the "response from the server"? or what are we talking about? Why do you need a component that will bring the structure into the desired form? etc.
---
Finally:

And I don't even need examples. I want to start stuffing my bumps.
BUT I definitely don’t want to cut the project for a couple of months (the infinitely more complicated toDo) and then understand what I’m used to doing because it’s not necessary.

There is no getting used to "doing what you shouldn't do" - it does not happen . You first do what you think is the best possible, in the process, sawing something, then insight / advice comes - you understand that it will be better this way and do it further. If a programmer knows how to "do it better", but at the same time does it "as usual", then he is worthless.