Exploring our Currency Exchange Application

Jamund Ferguson: [0:00] In this course, we're going to be building a currency conversion calculator using Redux and React hooks. We're going to start out with an existing React application built with React hooks, and Redux in piece by piece. I'm hoping through this process you'll see why and where Redux might make sense to use in your applications.

[0:16] To get started, open up the sample application in GitHub. Go ahead, scroll around the README file. maybe click through some of the code, if you'd like. When you're ready, click the code dropdown, and copy the URL.

[0:29] In a terminal window, type git clone and paste in the URL. Then cd into the exchange-rate folder and type either yarn or npm install. That will take just a few minutes to install. When that's done, you can type yarn start to kick off your application. I already have one running, so I'll skip that step.

[0:53] With your code up and running, go ahead and open it up in your IDE of choice. In my case, I like to use Visual Studio Code.

[1:01] I'm going to walk through some of the important files in our application. The first one being index.js. There, you can see we use ReactDOM to render our ExchangeRate component. When we go into the ExchangeRate component, you can see that it primarily renders three sections. Those correspond with the sections in our application over here.

[1:19] Atop, we have our header section, which contains both the ExchangeRate-header and the currencyCode picker, which is just a select box which allows you to choose your base currency code. In the middle section, we have an AmountField, which takes an amount and an onChange handler. That allows you to update the amount.

[1:39] For our final section, we have a RateTable, which displays the calculated amounts for each currency. Up at the top, you can see I've got two use callbacks here, which set up our currencyCode and AmountChange handlers.

[1:53] I also have one useEffect. The useEffect is responsible for updating the exchange rate information each time I change the currency code. If I click up here and click euros, you can see that down here, all of the exchange rates are updated, and new calculations are made to estimate the conversion amounts. Likewise, as I type in real time, I get an updated amount in my rate table.

[2:16] Most of the logic of our application is here in the ExchangeRate.js file. I'll quickly view the three other components to show you how they work. AmountField is the controlled input field which takes a value, which is the amount, and then an onChange handler, which is owned by ExchangeRate.

[2:32] CurrencyCodePicker is a select box which takes a value, which is the current currencyCode, an onChange handler, and then maps the list of supported currencies to decide which to display.

[2:42] Finally, RateTable loops over currencyData, which is an object with a key of currencyCode and the value of rate. It uses that and the amount typed in the amount field to calculate an estimate of how much your currency would be worth in these other currencies.

[3:00] Then, we use toLocaleString here to format it in the locale of the currency code that you have. You'll see JPY, for example, doesn't have a decimal separator. Canadian dollar says CA dollar. Pounds shows the £ symbol, etc.

[3:14] Overall, it's a pretty straightforward React application using hooks. Hopefully, you understand that already, but I want to show you how using Redux can actually make this application better.