Exploring our Currency Exchange Application
We’re going to start out with an existing react application built with react hooks and add redux in piece by piece.
All of the code for this application can be found here: https://github.com/xjamundx/exchange-rate
To setup your app type:
git clone https://github.com/xjamundx/exchange-rate.git;
cd exchange-rate;
yarn;
yarn start;
There are primary in this repo you should be looking at:
- The
mainbranch features the currency exchange calculator using react hooks. That will be the basis for our course. - The
reduxbranch is basically the final state of the application after we apply redux.
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.
It looks like there's some sort of issue with the useEffect and the gettingExchangeRates function. Whenever I console.log(rates) it returns undefined, so when it sets the state it breaks the app. Not sure how to fix this though.
Luis and Rachel, thank you for your feedback. I believe the API we were hitting may have slightly changed on their end. I'll be diving in this today and later this week and make some adjustments to the code if needed. THANK YOU for letting me know about these issues.
I have updated the sample app on github to reflect the fact that the API changed to require an API key. All of the code that we use in the videos remains the same, but now there's a special fetch method I use that provides mock data instead actually hitting the server. You can run git pull on a clean branch to get all of the latest changes. If you've already made changes to the code base you will want to run git stash before you run git pull. Let me know if you have any more issues with this lesson and thanks for reporting this issue.
After I clone the Repo and do "npm install" I get this error
TypeError: Cannot convert undefined or null to object RateTable src/components/RateTable.js:2 1 | export function RateTable({ currencyData, amount }) {
Any suggestions ?