NASA Photo of the Day 2
Tags: react, redux, frontend, javascript
Published: 2020-01-02 15:16:41

---
title: NASA Photo of the Day 2
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/20191106-nasa-photo2.jpeg
---

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

In the previous article we have seen how to set up a basic application that fetches the NASA photo of the day.

Our application has a button that when clicked fires out an action that connects to the NASA `API` and asynchronously fetches some data, including an image. We then display this image in our view.

### Application states

We can think of our application having multiple states.
The initial state is just a blank page.
When we click the Fetch button, we enter into the `LOADING` state.

In the `LOADING` state we have initiated the `API` call and we are waiting to see if we get data back from the remote server.
In our example, we are going to show a *loading animation* while in this state, so the user has some visual feedback that something is happening.

Once our `API` called is resolved, we pass from the `LOADING` state to either a `SUCCESS` state or a `FAILURE` state, depending if our call was successful or not.

If the call is *successful*, we transition into a `SUCCESS` state and display the data received to the screen.
If the call is *unsuccessful*, we transition into a `FAILURE` state and we display an error message.

From this description, we gather that the action creator handling this button click needs to be able to dispatch three different actions to the reducer: `FETCH_PHOTO_START`, `FETCH_PHOTO_SUCCESS`, `FETCH_PHOTO_FAILURE`.

We call our action creator getPhoto and we define it in a new `index.js` file inside `src/actions/`

```
mkdir actions
touch actions/index.js
```

Let's start small by just handling `FETCH_PHOTO_START`.

Remember, an action creator is a function that returns an object with a mandatory `type` property and an optional `payload` property.
The type we want to return is `FETCH_PHOTO_START`
Here's our action so far:

```js
// src/actions/index.js

export const FETCH_PHOTO_START = 'FETCH_PHOTO_START';

export const getPhoto = () => {
  return {
    type: FETCH_PHOTO_START
  }
}
```

We need to make our application aware that we are in the `LOADING` state, so we add a new property to our state called `isLoading`, initially set to `false`. We will switch it to `true` when the transition to the `LOADING` state starts.

In our reducer, we add the new property to the initial state:

```js
// src/reducers/index.js

const initialState = {
  // ... existing code ...
  isLoading: false
}
```

We also add a `switch` statement to the reducer so we can return a new version of the state with the `isLoading` property set to `true` when `FETCH_PHOTO_START` is received:

```js
// src/reducers/index.js

const reducer = (state = initialState, action) => {

  switch (action.type) {
    case FETCH_PHOTO_START: {
      return {
        ...state,
        isLoading: true
      }
    }

    default: return state;
  }
}
```

Since we are using a new state property, we need to add it to our `mapStateToProps` function in the `NASAPhoto` component:

```js
// src/components/NASAPhoto.js

const mapStateToProps = state => {
  return {
    // ... existing code ...
    isLoading: state.isLoading
  }
}
```

We said we are going to show a loading spinner so we add a dependency called `react-loader-spinner`:

```
npm install react-loader-spinner
```

Once it's installed, we can use it in our component by importing it and configuring it through `props`.
Note that we show the spinner only when `isLoading` is `true`, so we check for that condition and if it's true we add the spinner component:

```js
// src/components/NASAPhoto.js

import Loader from 'react-loader-spinner';

const NASAPhoto = props => {
  return (
    <>

 // ... existing code ...

      { props.isLoading && (
        <Loader type="BallTriangle" height={90} width={60} color="#00BFFF" />
      )}

    </>
  )
}
```

*Note*: `height` and `width` in the `Loader` need to be numbers, it will give an error if we type `height="90"` because that's a string, so we need to interpolate the number inside braces as the `prop` value.

At this point, everything should be ready to load a spinner when our application goes into a `LOADING` state and `isLoading` is `true`.

But how do we trigger this change of state?
We will trigger the state change when we click the Fetch button so we need to add an `onClick` event listener and create a function that fires the `FETCH_PHOTO_START` action when the event is detected.

We'll do this 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).*