Tengo un formulario de soporte que entrega un mensaje de éxito de una API después del envío. En la clase de componente de formulario, obtuve mapStateToProps() que obtiene valor del reductor.
function mapStateToProps(state) { return { contact_form: state.contact_form.all} }y para mostrar la notificación al usuario, lo hago
if(this.props.contact_form.data) { notify_banner(" Your request is submitted successfully.","success",5000); }El problema con este enfoque es que el estado no se borra en absoluto. Entonces, cada vez que el usuario va a la página del formulario de soporte, esta alerta aparece ya que el estado aún se mantiene.
Eché un vistazo a este hilo sobre el estado de limpieza después de realizar una acción, pero esto vaciaría el estado y la alerta no se mostraría en absoluto.
Entonces, ¿cómo notifico al usuario solo una vez?
Una forma es enviar una acción exitosa después de que el usuario envíe el formulario. Aquí, tomo flag = true, lo que significa que se envía el formulario. Entonces puede tener esta marca para mostrar la notificación de banner.
if(this.props.contact_form.flag) { notify_banner("Success"); //disptach reset action here }después de la notificación, restablezca instantáneamente contact_form.flag a falso enviando la acción resetState.
export function resetState() { const request = { flag: false }; return { type: CONTACT_FORM, payload: request }; }