Dare Mighty Things
For my final project for Flatiron I was required to create a project with a Rails backend and a React/Redux frontend. I decided to showcase my skills with a project using some of the NASA open APIs. An API is an Application Programming Interface, which is a software intermediary. In english an API basically is part of the server that handles receiving requests and sends a response back. I used their Astronomy Picture of the Day API, Techport API (mine has the top 5 most viewed projects), and then their Mars Rover Pictures API.
I picked these API’s because they interested me the most, and I knew with the Rover API, I’d be able to come back to this project and update it once Perseverance landed on Mars. And that day has finally came. Perseverance landed on February 18th, 2021 and today I’m going to talk a little bit about how I’m going to update my reducers, which is just my requests to the server, and my actions, which represent an intention to change the state.
For starters I need to get the correct API address for the new rover which in my case is https://api.nasa.gov/mars-photos/api/v1/rovers/Perseverance/latest_photos?api_key=DEMO_KEY. Next lets get ready to make this AJAX call to be able to fetch the data. This fetch call is going to send a request to the server for the data then return it as a JSON file that I can then save as a Javascript object. In my case I only want the first 5 pictures versus all of the 6,000 pictures the rover has taken since landing. So in my file for the rover the code is going to look a little like
I added in a variable perObj, which will stand for perseverance object. Like I mentioned I don’t want all 6,000 pictures so I’m going to slice the results and only return the first 5 pictures. That is then going to be dispatched meaning it’ll trigger a state change. An action always needs a type so the function “knows” what to do. In this case the type is “FETCH_PERSEVERANCE” which I’ll explain a little later on, and then the payload which is a name for the property that holds the actual data in a redux action will be the perseverance object, perObj.
On to the next step! For my dispatch to know how to update the state, I need an action for it. Which in short just tells it what it’s updating the state with. In this file, since I already have 3 existing actions for each Rover request, all I need to add in is a last action for little Perseverance which will be identical to everything else I have.
Let’s break this down a little bit. So I have a variable called initial state that has all the rovers name set to a value of null. This allows me to include them all in my state at the same time so they all can render properly as oppose to only one of them. Without that line of code, only one rover will render when my state is loaded and for my project I need to know all of them can render. I added in the case of FETCH_PERSEVERANCE which just adds the object of perseverance to the state. I have a default of just returning the state as is in case the calls to the server fail.
My final steps for today are to mount this component and connect it to my store. Let’s get one thing out of the way, I did not make this easy for myself when I first made this project. I should have just done one function that made all four fetch calls to the API, so that I then wouldn’t need so many different actions because as you will see it 100% makes my Rover container a lot more complicated than it needs to be. But hey we all live and learn, and this has all been a learning experience for me to recognize what I did wrong, how to fix it, and to not repeat it in the future. Back to the code! I first imported the new function so I can be able to use it, I then added in this.props.getPerseverance(); into my componentdidmount to make sure that as soon as I hit my initial render she is up n ready to go. I also added it in to my mapstatetoprops so that the data my store is going to need is there, and I connected officially at the bottom in my connect function that, as the name implies, connects my data to the whole state tree of the application so that it can handle the updates and changes.
Remember how I said it gets a little complicated? Well, since this one container component is handling all of these different state changes so that it can all be cohesive I did have to manipulate my code a little bit in order to be able to use this component for all changing states. Just as in my reducer, I have actions and cases that I had to include again in my component in order to be able to toggle between rovers. I also had to add in a handleonclick that will be able to differentiate between which rover is being toggled in order to render the corresponding data. Without these functions, it would be a free for all, and all of the data would try to render at once and only end up having one show up. Of course this all doesn’t sound too bad, but heres the code for reference.
Well, I hope this sheds some light on my project, as well as some of the ins and outs of React/Redux. Stay tuned for next week, where I’ll be explaining the HTML and CSS needed in order to make sure that it all renders the way I want it to!
