如何根據狀態處理React-Redux中的通知？

我有一個支持表單，提交後從API傳遞成功消息。在表單組件類中，我得到了從Reducer獲取值的mapStateToProps（）。如何根據狀態處理React-Redux中的通知？

function mapStateToProps(state) { 
    return { contact_form: state.contact_form.all} 
}

，並顯示通知用戶，我做

if(this.props.contact_form.data) { 
     notify_banner(" Your request is submitted successfully.","success",5000); 
     }

問題這種方法是，狀態尚未消失的。因此，無論何時用戶轉到支持表單頁面，該狀態仍然存在時會顯示此警報。

我在看到這個thread清除狀態後，執行一個操作，但這將清空狀態和警報將不會顯示。

那麼，我該如何通知用戶一次？

來源

2017-01-02 Kailaash Balachandran

您可以在'componentWillMount'或'componentWillUnmount'上派發一個RESET動作。 –

你可以添加一個標誌到你的狀態，它會告訴你它是否已經被「告知」（該消息）並依賴於它，顯示與否;） – MariuszJasinski

如果用戶被允許提交表單，一旦。如果用戶想要提交多次？那麼這個標誌會產生複雜性。 –

一種方法是在用戶提交表單後發送成功操作。在這裏，我拿flag = true表示表單被提交。因此，您可以通過此檢查來顯示橫幅通知。

if(this.props.contact_form.flag) { 
    notify_banner("Success"); 
    //disptach reset action here 
}

通知後，立即通過dipatching resetState操作將contact_form.flag重置爲false。

export function resetState() { 
    const request = { 
    flag: false 
    }; 

    return { 
     type: CONTACT_FORM, 
     payload: request 
    }; 
}

來源

2017-01-26 16:44:13

如何根據狀態處理React-Redux中的通知？

回答

相關問題