React Redux Async Await

actionCreators.js

import axios from 'axios'
import * as actions from './actions'

export function suggestedSearch() {
    return async dispatch => {
        try {
            dispatch(actions.suggestedSearchLoading())

            const url = 'https://0b6c4e73-c7fd-4eab-b3ad-89e11db59c58.mock.pstmn.io/search'
            const json = await axios.get(url)

            if(json.status === 200 && json.data) {
                dispatch(actions.suggestedSearchSuccess(json.data))
            } else {
                dispatch(actions.suggestedSearchFailure('Something went wrong. Please try again later.'))
            }
        } catch(e) {
            dispatch(actions.suggestedSearchFailure(e))
        }
    }
}

actions.js

import * as types from './types'

export function suggestedSearchLoading() {
    return {
        type: types.SUGGESTED_SEARCH_LOADING
    }
}

export function suggestedSearchSuccess(data) {
    return {
        type: types.SUGGESTED_SEARCH_SUCCESS,
        data
    }
}

export function suggestedSearchFailure(error) {
    return {
        type: types.SUGGESTED_SEARCH_FAILURE,
        error
    }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Root from './roots'

ReactDOM.render(
  <Root>
    <App />
  </Root>,
  document.getElementById('root')
);

rootReducer.js

import { combineReducers } from 'redux'
import searchResultContent from './searchReducer'

const searchReducer = combineReducers({
    searchResultContent
})

export default searchReducer

roots.js

import React from 'react'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk';
import reducers from './rootReducer';

export default ({ children, initialState = {} }) => {
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    const store = createStore(
        reducers, 
        initialState,
        composeEnhancers(applyMiddleware(thunk))
    )
    return (
        <Provider store={store}>
            {children}
        </Provider>
    )
}

searchReducer.js

import * as types from './types'

const searchInitialState = {
    data: {},
    loading: true,
    error: false,
    errorMessage: ''
}

export default function searchResultContent(state = searchInitialState, action) {
    switch(action.type) {
        case types.SEARCH_FILTER_LOADING: {
            return {
                ...state,
                loading: true,
                error: false,
                errorMessage: ''
            }
        }

        case types.SEARCH_FILTER_SUCCESS: {
            console.log('DATA => ', action.data)
            return {
                ...state,
                data: action.data,
                loading: false,
                error: false
            }
        }

        case types.SEARCH_FILTER_FAILURE: {
            return {
                ...state,
                loading: false,
                errorMessage: action.error || '',
                error: true
            }
        }

        default:
            return state
    }
}

types.js

export const SUGGESTED_SEARCH_LOADING = 'SUGGESTED_SEARCH_LOADING'
export const SUGGESTED_SEARCH_SUCCESS = 'SUGGESTED_SEARCH_SUCCESS'
export const SUGGESTED_SEARCH_FAILURE = 'SUGGESTED_SEARCH_FAILURE'