如何根据 saga 处理程序的响应在屏幕上显示消息答案

【问题标题】：How to display a message on screen depending on the response from a saga handler如何根据 saga 处理程序的响应在屏幕上显示消息
【发布时间】：2021-08-05 15:15:45
【问题描述】：

联系 Saga 处理程序

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

前端表单handleSubmit函数：

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

根传奇

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

基于此代码，如何在表单提交后根据是否成功在前端显示消息？如果是，则只需重定向/刷新页面，如果不是，则在屏幕上显示错误供用户查看

【问题讨论】：

标签： reactjs redux redux-saga

【解决方案1】：

由于 sagas 基本上是生成器，因此您需要做的是在 yield call(axios) 之后触发一个动作。以这种方式更改存储并在您的组件中获取结果。

为了处理错误，在 catch 块中放一个动作做同样的事情。

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

像这样更新 store，然后在组件中获取你需要的 store 属性。

【讨论】：