Clever Geek Handbook

Reat - Components / Containers: One View, Multiple Actions?

I'll try to be brief: I have a Filter View (Container) that combines dumb components like the Grid Component with results, and a Form component with some fields and actions like submit. In this context, some doubts arise: - In the case where I have a component (like a dropdown) that has its own data (a list of something), should it be responsible for fetching its own data, or should it be delegated to it smart parent (Filter View)? - This Smart Filter View has a lot of caring components, so is it responsible for distributing all the actions needed by these components (for example: handleSearchClick, handleGridRowClick, etc.)?

If so, this should be the final structure:

  • FilterView (smart)
    • Form (dumb, with callback actions sourced from FilterView)
      • TextField (mute)
      • CustomerDropDown (smart? Or should FilterView send data to it?)
    • Grid (dumb, with callback actions sourced from FilterView)

I hope I explained well what I meant.

Thanks in advance.

+3


source to share


1 answer


Fluffy questions get fluffy answers.

There is no real consensus on how to find a sweetspot for smart / dump components. It has a lot of blog posts and even the React docs are not clear on this concept. Assuming you are using something like Redux, I would say don't be afraid to plug in your "deeper" components. Try to find some simpler and more straightforward code that makes sense to watch and reason rather than follow some exact science here.

In my current project, we used to follow "pass all data from top to bottom", now we switched to connecting the bottom components directly to the stores and the actions they need. And it feels so much better and works great for us. Our problem and why we switched is well documented by others in Recommended Use of the connect () problem in the Redux repository.

With Redux and the connect component, there is no real cost of connecting to the state more often, so it mostly depends on you and your legacy.



Even if you're not using Redux, I'm sure these blog posts and issues can help you.

Good reading tips: Recommended use of connect () # 419

Abramov's Smart and Dumb Blog Post

0


source






More articles:


All Articles