---
title: "Redux Async Actions"
description: "How to handle async actions in Redux without middleware. Practical notes and code examples on Redux Async Actions by Hemanth."
url: "https://h3manth.com/scribe/redux-async-actions/"
canonical_url: "https://h3manth.com/scribe/redux-async-actions/"
markdown_url: "https://h3manth.com/scribe/blog/redux-async-actions.md"
publishDate: "2018-02-16T00:00:00.000Z"
author: "Hemanth HM"
category: "web"
tags: ["javascript","redux","react"]
word_count: 199
reading_time_minutes: 1
x_markdown_tokens: 508
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# Redux Async Actions

> How to handle async actions in Redux without middleware. Practical notes and code examples on Redux Async Actions by Hemanth.

The most common question I hear post intro to Redux is: "How do I fetch some data in actions?"

Most would hit the roadblock with: `Actions must be plain objects. Use custom middleware for async actions.` That is because Actions are meant to be plain JavaScript objects and must have a `type` property.

## Vanilla Approach

Let's see a quick example to make an API request using the vanilla approach (without middleware).

### Initial State

```javascript
const initialState = {
  loading: false,
  error: false,
  comic: null
}

### Reducer
javascript
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCHING_COMIC':
      return { ...state, loading: true }
    case 'FETCH_COMIC_SUCCESS':
      return { ...state, loading: false, comic: action.comic }
    case 'FETCH_COMIC_FAILED':
      return { ...state, loading: false, error: action.error }
    default:
      return state
  }
}

### Store and Dispatch
javascript
const store = Redux.createStore(reducer);

store.dispatch({ type: 'FETCHING_COMIC' })

fetch('https://xkcd-imgs.herokuapp.com/')
  .then(response => response.json())
  .then(comic => {
    store.dispatch({ type: 'FETCH_COMIC_SUCCESS', comic })
  })
  .catch(error => 
    store.dispatch({ type: 'FETCH_COMIC_FAILED', error })
  )

### Render
javascript
const render = function(state) {
  let xkcd = document.querySelector('#xkcd');
  xkcd.src = state.comic.url;
  xkcd.alt = state.comic.title;
}
```

For more complex use cases, consider [redux-thunk](https://www.npmjs.com/package/redux-thunk), [redux-promise](https://www.npmjs.com/package/redux-promise), or [redux-saga](https://www.npmjs.com/package/redux-saga).