How to display a message on screen depending on the response from a saga handler

Question

Contact Saga handler

export function* handlePostContactUser(action) {
    try {
        yield call(axios.post, '*endpoint*', action.data);
    } catch (error) {
        throw error;
    }
};

Front-end form handleSubmit function:

let handleContactFormSubmit = () => {
     let name = input.name;
     let email = input.email;
     let message = input.message;
     dispatch({ type: 'POST_CONTACT_USER', data: {name, email, message, date}});
}

RootSaga

export function* watcherSaga() {
    yield all([
       takeEvery("POST_CONTACT_USER", handlePostContactUser)
    ]);
};

Based on this code, how could I display a message on the front end after the form submits, based on if it was successful or not? If it was, then just redirect/refresh the page, if not, display an error on the screen for the user to see

score 0 · Accepted Answer · answered Aug 06 '21 at 07:52

Since sagas are basically generators, what you need to do is fire an action after the yield call(axios). Change the store this way and get the result in your component.

In order to handle an error, put an action in the catch block doing the same thing.

export function* handlePostContactUser(action) {
    try {
        yield call(axios.post, '*endpoint*', action.data);
        yield put('MY_SUCCESS_ACTION')
    } catch (error) {
        yield put('MY_ERROR_ACTION')
    }
};

Update the store like this and then get the store properties that you need in the component.

How to display a message on screen depending on the response from a saga handler

1 Answers1