Redux: correct to show/display error when action execute or async action ?

[tantou]

I have read the code in redux/examples/real-world,and I have write some example use react+redux or react-native +redux
I am confusing with where to display the error message ? in the component or action ?
one api call may three state :REQUEST SUCCESS FAILURE
the state REQUEST can show loading in the component
the state SUCCESS can show the actual data in the component
But the state FAILURE has a message of the reason happened ,and how to show it to the user to let them know why it failure?

//code in redux/examples/async
function fetchPosts(reddit) {
  return dispatch => {
    dispatch(requestPosts(reddit))
    return fetch(`https://www.reddit.com/r/${reddit}.json`)
      .then(response => response.json())
      .then(json => dispatch(receivePosts(reddit, json)))
  }
}

the code above does not catch when the fetch error ,if the server does not response,we should catch it and still the question:how to show the reason to the user ?

// another example with error catch
function fetchSongComments(songId) {
  return dispatch => {
    return fetch(constructSongCommentsUrl(songId))
      .then(response => response.json())
      .then(json => dispatch(receiveSongComments(songId, json)))
      .catch(error => console.log(error))
  }
}

the code above catched the error ,but not dispatch ;

function fetchSongComments(songId) {
  return dispatch => {
    return fetch(constructSongCommentsUrl(songId))
      .then(response => response.json())
      .then(json => dispatch(receiveSongComments(songId, json)))
      .catch(dispatch(receiveSongCommentsFailure()))
  }
}

the code above has dispatched ,but without show the reason to the user
Anyone helps?

[gaearon]

The real-world example does show the error message. It extracts error field from any action. A special reducer called error takes care of this. The last error message is stored in the state. Component reads it.

You can try running real-world example with disabled WiFi and you’ll see that error message is shown. If you have more questions it’s best to ask them on Discord or StackOverfow because those are usage questions. In fact I found one: http://stackoverflow.com/questions/34403269/what-is-the-best-way-deal-with-fetch-error-in-react-redux