Edit in JSFiddle

const render = function(state) {
  let xkcd = document.querySelector('#xkcd');
  let spinner = document.querySelector('.spinner');
  // show hide spinner
  spinner.style.display = state.loading ? "block" : "";
  // set src and alt
  xkcd.src = state.comic.url;
  xkcd.alt = state.comic.title;

  // hide spinner on img load
  xkcd.addEventListener('load', () => {
    spinner.style.display = 'none';
  })
}

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

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

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
  }))

store.subscribe(() => render(store.getState()))
<div class="cartoon">
  <div class="spinner"></div>
  <img id="xkcd" src="" alt="">
</div>