React series — Weather App — Part 4

Photo by Fabian Grohs on Unsplash

In this part let’s bind the components we create in last part together and talk about redux in more details.

Let’s start adding a new component called search_bar.js into componentes folder:

Conceptually this component is a container, so I could create another folder just for containers, but I won’t do that for now.

Container Components

Presentational and Container Components

In this component search_bar.js I’ve imported connect component from react-redux and this is fundamental to bind the component with action creators. When we export a component using a connect component, we have access to reducers and action creators.

The connect component is a Higher-Order components:

Higher-Order Components - React

export default connect(null, actions)(SearchBar);

In this case, I have access to all functions on my actions folder (inside the index.js).

The next component we will create is weather_list.js.

Like the search_bar.js component, weather_list is also a container and have access to reducers using connect higher order component.

We need to install another component called Numeral:

$ npm i numeral

Ok, let’s start the application and see how it looks like:

Great, now if you type any city and hit enter I should works!

Opss

Not yet, we forget to tell react-redux how to deal with promises. When we return the payload has a promise not the real value.

export function fetchWeather(city) {
   const url = `${ROOT_URL}&q=${city}&units=metric`;
   const request = axios.get(url);
   return {
      type: FETCH_WEATHER,
      payload: request
   }
}

To fix this we need to install another component called redux-promise and change the root index.js to use it as middleware.

$ npm i redux-promise

Now if we type some city and hit enter we have something:

Almost there, let’s add some style. Add new file on public folder called style.css:

Add a reference to this file on index.html (also on public folder):

Finally add a container class to root div (line 30).

<div class="container" id="root"></div>

Let’s try again:

Nice! our application is almost done. In the next part I will talk about some redux improvements and middlewares.

Part 5: https://medium.com/@leonardobrunolima/react-series-weather-app-part-5-764e8559e84a

Thanks!

I’ll update the github repo for this project as soon as I release each part of this serie. You can follow or clone here:

lblima/react-weather-app