How it works…

When we npm start our application, we see a very plain design; see the following screenshot. Let's understand how did we get here:

  1. The main page was displayed.
  2. The countries drop-down list, on receiving an empty list of countries, used a thunk to get all countries.
  3. getCountries() action was dispatched.
  4. The reducer updated the store to set the loadingCountries flag to true
  5. The page was redrawn, and a "Loading countries..." text was shown instead of the drop-down list.
  6. When the countries list came back, a countriesSuccess() action was dispatched, with the received list of countries.
  7. The reducer updated the store to include all countries and to reset loadingCountries to false.
  8. The page was redrawn, and now the country drop-down list has a list of countries to show as shown, in the following screenshot:

 Our initial screen

If we select a country, the service will be called, and results will be shown; see the following screenshot. The logic for this is also interesting:

  1. When the region table is drawn without any regions, some "No regions" text is displayed.
  2. When the user selects a country, the drop-down list uses a thunk to get its regions.
  3. regionsRequest() action was dispatched.
  1. When the regions came back, a regionsSuccess() action was dispatched,
  2. The page was redrawn after the reducer created a new state, showing the regions' list. Refer to the following screenshot:

 The results of calling our restful server

You could be wondering, however, where is the "Loading countries..." text? The problem (if you want to call it that!) is that the service response comes too quickly, so the message flashes by and disappears. We can get to see it a bit longer if we cheat and add some delay in the getCountries() function. Include the following line before calling axios() to delay execution for five seconds:

await new Promise(resolve => setTimeout(resolve, 5000));

Now, you'll have time to see the missing state, as shown in the following screenshot:

Adding some delay lets us see what's displayed while waiting for the list of countries

So, now we can see that our state handling was correct, and that everything is displayed the way we wanted it to be!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset