Question

单击按钮时，我会调用以下内容：

this.props.dispatch(addNote(this.state.noteContent))

这又会调用以下操作：

export default function addNote(note){
  return dispatch => {
    axios.post('http://localhost:2403/notes', {
        Body: note
    })
    .then(function (response) {
        dispatch({
            type: ADD_NOTE,
            payload: response.data
        })
    })
    .catch(function (error) {
        console.log(error)
    })
  }
}

我的reducer然后更新状态，并且新的注释被添加到列表中，所以它们都正常工作。

但是我现在想在UI中显示一条消息“已成功添加注释”。理想情况下，这将是更广泛的通知系统的一部分，但是现在，我只需要弄清楚如何报告这一行动的成功（或失败）。

我如何实现这一目标？

Answer 1

您可以使用位于应用中路线顶部的Toast组件（如此https://www.npmjs.com/package/react-toastify），每次调用redux中的操作时都会呈现。

在每个操作函数中，您可以调用消息减少器来更新消息减速器内的状态。每次更改reducer中的状态时，toast组件将重新呈现并持续一段时间，或者直到用户手动关闭toast组件。

Answer 2

您可以使用redux-thunk从您的发送中返回承诺，为什么不使用它？在你的thunk中尝试这个代码：

export default function addNote(note){
    return dispatch => {
        return axios.post('http://localhost:2403/notes', {
            Body: note
        })
        ... //function continues

然后你可以这样做：

this.props.dispatch(addNote(this.state.noteContent)).then(successFunc, failureFunc);

successFunc = function() {
    //Show message on UI
}

如何在Redux调度后显示消息

2 个答案: