NASA Photo of the Day React/Redux application
Tags: react, redux, frontend, javascript
Published: 2019-12-31 13:31:48

---
title: NASA Photo of the Day React/Redux application
published: true
description: Building an app that connects to a remote API to show Redux middleware
tags: react, redux, frontend, javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191105-nasa-photo1.jpeg
---

## 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):

```js
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.

```js
// 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`:

```js
// 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.

```js
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](https://cesare.substack.com).*