Lifting State and code organisation in a small app


(Peck) #1

Hi all,

I’m new to react and am trying to learn more about my code organisation. I’m trying to do so by creating a small site that searches for night sky conditions. It uses Googles Geolocation API and Dark Sky’s API.

At the moment I have 1 main container WeatherContainer that has all my application logic. It calls the Dumb Components to render the search bar and the display of the weeks weather.

I’m concerned that my WeatherContainer is doing too much work as all functionality relating to the App is in this Container and I want to know if there’s a better way to break this up.

My thoughts are to put in a LocationSearchContainer, this would handle all the work for getting a users coordinates with the GeoLocationAPI.

Then WeatherContainer would only concern itself with communicating with Dark Sky’s API rendering the Weather Component.

I would then lift the shared states to App.js leaving the functionality in the respective files.

So my question would this be considered good practice? Would there be a better way to handle this?