NASA Photo of the Day React/Redux application

Building an app that connects to a remote API to show Redux middleware

To demonstrate how Redux middleware works, we are going to build an application that displays a space photo. The photo is retrieved from the NASA API

Before we do anything we need to grab an API key from the NASA website.
We go to this website: https://api.nasa.gov/ to generate the API key that we can use in our code. Once the key is generated we can simply put it inside our request URL and it should work.

Here's an example of how the API key works in the URL we use for the request, just substitute <---API key---> with the actual key:

https://api.nasa.gov/planetary/apod?api_key=<---API key--->

Once we have our API key, we can think about how our application is going to look like.

The basic application

It will be a simple application, with only one screen. The screen has a title and a button. When we click on the button we connect to the NASA API and fetch the photo of the day.

First of all we need to generate a skeleton application with create-react-app:

npx create-react-app nasa-photo 

This application will have a simple component for the main screen that we are going to call NASAPhoto. It will live in the NASAPhoto.js file, inside the components directory.

mkdir components
touch components/NASAPhoto.js

This is the basic code for our component (remember we need to import React at
the top of the file):

const NASAPhoto = props => {
  return (
    <>
      <h2>{props.appTitle}</h2>

        <div className="picture">
          <img src={props.photoOfTheDay} alt="NASA pic" />
        </div>

      <button>Fetch Photo</button>
    </>
  )
}

As you can see, it's a functional component with a title set to props.appTitle and a <div> that displays a picture.
The <img> src is set to props.photoOfTheDay
Finally, we have a button to initiate the fetching action.

Right now we don't have any props so our application is not displaying any title or photo. We know that these props come from the state but we haven't initialized any state at the moment.

The reducer

The place where we initialize state, if you remember from previous articles, is inside the reducer. So, we might as well create a reducer file in /src/reducers/index.js:

mkdir reducers
touch reducers/index.js

Before we get into complex stuff we want to make sure we are wiring things up
correctly, so we start out the reducer with some basic initial state to make sure our application is working.
Reducers are supposed to create new state based on a received action, but for now we just have the reducer return the state that was passed to it unchanged.

// src/reducers/index.js

const initialState = { 
  appTitle: "NASA photo of the day",
  photoOfTheDay: null
}

const reducer = (state = initialState, action) => {
  return state;
}

export default reducer;

Now all we have to do is create the Redux store in index.js.
We need to import createStore from Redux, Provider from React-Redux and the reducer we have just created, but before all that we need to install the required libraries:

npm install redux react-redux

Once we have done that and imported all the required files we can create our Redux store, pass the reducer to it, and wrap our App component with the Provider:

// index.js

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducers';

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Connect the component to the store

There's still one thing we need to do in order to display our state through the props. We need to connect the NASAPhoto component to the store with the connect and mapStateToProps functions.

import { connect } from 'react-redux';

//... existing code ...

const mapStateToProps = state => {
  return {
    appTitle: state.appTitle,
    photoOfTheDay: state.photoOfTheDay
  }
}

export default connect(
  mapStateToProps,
  {}
)(NASAPhoto);

Good! Now our title displays correctly from the state.
The photo is still broken, but we will fix it when we actually grab the real photo from the NASA API.
We will continue developing this application in the next article.

---

I write daily about web development. If you like this article, feel free to share it with your friends and colleagues.

You can receive articles like this in your inbox by subscribing to my newsletter.