redux-saga middle-ware how to handle api error

Question

I am using redux-saga middle-ware. I have one login screen where user is providing email and password. Login failure redux code looks like this.

export const failure = (state) =>
  state.merge({ fetching: false, error: true, login: {} })

What is best practise to display error message ("Invalid email/password") to user.

Issue: suppose I am using error in state to display message but after unsuccessful login if there is any change in state because of some other action my code again displays the same error message.

Does this answer your question? [How to handle errors in fetch() responses with Redux-Saga?](https://stackoverflow.com/questions/40007935/how-to-handle-errors-in-fetch-responses-with-redux-saga) — Michael Freidgeim, Oct 03 '20 at 12:11

score 1 · Answer 1 · answered Mar 29 '18 at 16:12

Here is my scenario:

1. A User attempts to log in
2. Show popup with an error message
3. A User closes popup and under the hood, I dispatch action to clean current error in the state.
4. A User attempts to log in and can see a new error

Basically, there is a dedicated action that will be dispatched to reset error in the state.

score 1 · Answer 2 · answered Mar 29 '18 at 16:19

The best way to display an error to the user, is maintaining the Alert handling in your sagas states

This will ensure that the error message is shown only when your saga is called.

For example

// Your default Saga
export function * yourDemoSaga(action) {
const {yourDemoActions} = action
const response = yield call(yourDemoService, yourDemoActions)
if (response.status >= 200 && response.status <= 299) {
    const response = path(['data', 'response'], response)
      yield call(Alert.alert, 'Success', 'Message has been successfully set.' )
        yield put(YourActions.success())
  } else {
      yield call(Alert.alert, 'Failure', 'Error Message Set here.' )
     yield put(YourActions.failure(' Please refresh or try later.'))
}
}

score 0 · Answer 3 · answered Mar 30 '18 at 15:12

0

I added error display logic in LoginRedux:

export const failure = (state) => {
  ToastAndroid.showWithGravity('Invalid username/password.', ToastAndroid.SHORT, ToastAndroid.CENTER);
  return state.merge({ fetching: false, error: true, login: {} })
}

answered Mar 30 '18 at 15:12

me_astr

922
1
14
21

redux-saga middle-ware how to handle api error

3 Answers3