Where should there be a line to separate the state component from the state without considering the state in the Response?

Question

React encourages the use of stateless components as much as possible and has a state management component that manages them. I understand that this can make stateless components more reusable and easier to manage. However, to the extreme, we can always put the state on a top-level component, for example, App.js, and pass information and callbacks through a long chain of props. And if you use Flux, actions can always be sent to it (performed through callbacks).

So, I am wondering which line to separate state and state components without considering state? And if you use Flux, where should the actions be sent?

--- Add an example ---

Say I have Google docs, such as a web application with a toolbar and display content. I guess we will have a component structure.

<App> <Toolbar /> <Content /> </App> 

There are buttons on the toolbar that affect the contents of the screen, for example, a bold text button.

So, should the application go down to the ButtonPressed callback details to the toolbar and send the actions on their own or should the toolbar allow it to do it on their own?

Should the application transfer ContentString content to Content, or let the Content List itself save store changes?

Thanks!

Answer 1

From my point of view, a simple application can use the Flux template this way:

• Children emit action.
• The application listens to the storage and dissemination of processed data to its children.

With this approach, you have a stateless component, but with a good code organization without callback details. But both of your suggestions are also true, it is a decision that you make regarding the size and needs of your application.

If the component that you create will be used outside of your application, do not use the stream as much as possible and let the developer choose the desired approach for his needs.

Answer 2

This is a good question, and it is addressed differently even between different Flux implementations.

I prefer to have my state in one high-level component that sees a "big picrure" and distributes the data using the details for all low-level ones. In a good React application, most components do not have to "care" about where the data comes from. Having one good structured model instead of several fragmented ones is also useful so far. (By the way, this can be achieved even when using several stores, a high-level component can listen to them all and actually “hold” this large model).

As far as actions are concerned, I prefer all of my "dumb" visualization components / ui / display to work with callback details. Thus, they are easier to reuse, and this is a good separation of problems. In richer components that contain a bit of business logic, I invoke Reflux actions directly. Usually they are also container components for the aforementioned “dumb” ui controllers.

So, the bottom line is that the data should come as fast as possible, actions can be launched from the bottom components, but always check if you can achieve the same result using the callback details.

To your question, the toolbar is a complex component to have its own toolbar and name them directly. But the Content component must definitely get its data from above. It also makes it easier to reason about data flow in this way when an application becomes complex.

Hope this helps. The whole Flux thing is still in development ...