The COVID-19 pandemic we’re all living through is a trying time for all of us. The complexities of the new virus spreading across whole world have forced us all to come to terms with information that is unknown, scary and confusing.
As many others I looked at the data daily. While searching for the information about number of cases in United States, compering and monitoring whats going on in rest of the world it was clear that all of us at some point want to consider and compare not only local data trends but global and specific country real time data.
So, my goal was set to develop application that could easily explore and compare the COVID-19 outbreak worldwide, using real-time global data to check information like total, deaths and recovered cases or look into more detailed information for specific country such as: number of cases, recovered active, critical, tests, today’s cases, deaths and population.
Covid-19 App backend functionality was build with Ruby on Rails RESTful API and the front end with React Redux.
Project Requirements
-Use the create-react-app generator
-App should have one HTML page to render react-redux application
-There should be 2 container components and 5 stateless components and 3 routes
-The Application must make use of react-router and proper RESTful routing (react-router v4 was used)
-Redux middleware should be used to respond to and modify state change
-Make use of async actions and redux-thunk middleware to send data to and receive data from a server
-Rails API should handle the data persistence with a database. fetch() should be used within actions to GET and POST data from API
-Client-side application should handle the display of data with minimal data manipulation and Application should have some minimal styling, use react-bootstrap framework
I used this covid-19 API for global numbers with information like total cases, deaths and recovered cases:
To fetch() date from API i used Axios, hugely popular HTTP client that allows us to make GET and POST requests from the browser.
Installing Axios
To use Axios with React we need to install Axios.
npm install axios
From more specific country information i used this covid-19 API
This is the list of all countries with more detailed information:
And if we want to search specific country info, this is what we get for Selected country (USA):
Using Hooks
What is a Hook?
A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components.
What does calling useState do?
It declares a “state variable”. Our variables are: latest ,results ,searchCountries . This is a way to “preserve” some values between the function calls — useState is a new way to use the exact same capabilities that this.state provides in a class.
What does useEffect do?
By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates.
This is how useState useEffect and axios to perform GET request for those two APIs:
Lets get back to project requirements
Redux middleware should be used to respond to and modify state change, that means we need to do code refactoring.
Benefits of moving to Redux
Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS.
As our React applications become larger, our state becomes more spread out between different components, and at a certain point, the component tree becomes a web of props and state that can obscure our view of how components are handling and sharing data with each other. Here, Redux offers a solution.
Redux places all of our data in one place — the state. This state is just a plain JavaScript object. To change our application state, we need to create an action that holds information for how to update that state. The action, combined with the previous state, produces an updated state.
We’ve introduced a new function called the dispatch function that solved two problems for us.
First, it persisted changes to our state. This is because we called the dispatch function, the dispatch function called our reducer, and then we took the return value from the reducer and assigned it to be our new state.
Second, it ensured that each time our state updates, our HTML updates to reflect these changes. It does this by simply calling the render function. Each time we call dispatch it's as if we are then calling render.
This is how actions/summaries.js file looks like:
Next Steps
This is just begging.
I like Data visualization and this set of data is ideal for implementing map and charts. Probably i’ll use D3 library as one of the best instruments to create customized visualizations.
To connect please check my Github, LinkedIn or Twitter. Thank you for reading!
Top comments (0)