Right pattern for reporting error to user

With Redux Saga, what’s the recommended pattern to report error while executing an operation to user? With redux-thunk we can return a promise while dispatching an operation and allow user to essentially observe that promise. Since all the actions are plain objects in saga world, this isn’t possible. And it’s not always convenient to report error via state change (think react native alerts)

[tonyxiao]

In redux-thunk you can do

function fetchRequest(id) {
  return dispatch => {
    dispatch({ type: FETCH_OBJECTS_REQUEST });
    return callAPI(id).then(data => {
      dispatch({ type: FETCH_OBJECTS_SUCCESS, data });
      return data;
    }).catch(error => {
      dispatch({ type: FETCH_OBJECTS_FAIL, error });
      throw error;
    });
  };
}

And in the calling function

this.props.dispach(fetchRequest()).then((data) => {
  // Do something upon success
}, (err) => {
  // Do something upon failure
})

Strictly speaking this isn’t going through the store, but sometimes it’s really convenient to be able to do stuff like this when interacting with other APIs that are imperative rather than declarative.

[kuy]

I think that there is no difference between redux-saga and redux-thunk on the ability for reporting the progress to user. Because of Redux is single state, we need to put the operation progress to the store. And the state is changed only by Actions. So you can dispatch Actions based on the progress of operations.

Note: callAPI(...) returns Promise object

redux-thunk (action creator)

function fetchRequest(id) {
  return dispatch => {
    dispatch({ type: FETCH_OBJECTS_REQUEST });
    callAPI(id).then(data => {
      dispatch({ type: FETCH_OBJECTS_SUCCESS, data });
    }).catch(error => {
      dispatch({ type: FETCH_OBJECTS_FAIL, error });
    });
  };
}

redux-saga (without try-catch)

function* runRequest({ payload }) {
  const { id } = payload;
  const { data, error } = yield call(callAPI, id);
  if (data && !error) {
    yield put({ type: FETCH_OBJECTS_SUCCESS, data });
  } else {
    yield put({ type: FETCH_OBJECTS_FAIL, error });
  }
}

function* handleRequest() {
  yield* takeLatest(FETCH_OBJECTS_REQUEST, runRequest);
}

redux-saga (with try-catch)

function* runRequest({ payload }) {
  const { id } = payload;
  try {
    const data = yield call(callAPI, id);
    yield put({ type: FETCH_OBJECTS_SUCCESS, data });
  } catch (error) {
    yield put({ type: FETCH_OBJECTS_FAIL, error });
  }
}

function* handleRequest() {
  yield* takeLatest(FETCH_OBJECTS_REQUEST, runRequest);
}