时间戳

首页 > 解决方案 > 如何根据 saga 处理程序的响应在屏幕上显示消息

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

问题描述

联系 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}});
}

RootSaga

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

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

标签： reactjsreduxredux-saga

解决方案

由于 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')
    }
};

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

推荐阅读