Tengo un mensaje de diálogo en un modal que le pide al usuario que guarde los cambios si hay un intento de navegar a otra pantalla sin guardar.
Tiene 3 botones ( Guardar , Continuar sin guardar y Cerrar ). Obviamente, la ventana modal se ve exactamente igual en todas las pantallas, pero Guardar y Volver sin guardar realiza diferentes acciones según la pantalla.
Intenté crear un reductor de Redux separado para el modal, pero aprendí que no puedes almacenar funciones en Redux.
Entonces, mi pregunta es ¿cuál es el enfoque recomendado en una situación en la que tiene los mismos modales en términos de interfaz de usuario pero diferentes en términos de las acciones que realizan?
Realmente me gustaría tenerlo en el nivel raíz para poder enviar una acción y no molestarme en importar el modal a cada componente y controlar su estado dentro del componente.
Aquí hay un ejemplo de la acción que inicialmente estaba planeando enviar para mostrar el modal
showModal: (state, { payload }) => { state.modal.isOpen = true; state.modal.header = payload.header; state.modal.title = payload.title; state.modal.btnText1 = payload.btnText1; state.modal.btnText2 = payload.btnText2; state.modal.btnText3 = payload.btnText3; state.modal.btnAction1 = payload.btnAction1; state.modal.btnAction2 = payload.btnAction2; state.modal.btnAction3 = payload.btnAction3; }Crearía un componente de "envoltura" como PageWithConfirmModal y lo usaría en cada componente de página:
const MyCurrentPage = function( props ){ return <PageWithConfirmModal showModal= { props.showModal } save= { props.callSpecificSaveAction } proceed= { props.callSpecificProceedAction } close= { props.callSpecificCloseAction } > ... page content ... </PageWithConfirmModal>; } Depende de dónde provenga su payload.btnAction1 , etc., pero supongo que descubrirá cómo adaptar mi ejemplo.
Alternativamente, hay varias variantes posibles, según su situación, por ejemplo, pase alguna propiedad que describa qué hacer en lugar de las acciones, y decida qué acción usar dentro de PageWithConfirmModal o dentro del modal, por ejemplo:
const MyCurrentPage = function( props ){ return <PageWithConfirmModal showModal= { props.showModal } whatToDo= { DO_ACTIONS_FROM_MAIN_PAGE } > ... page content ... </PageWithConfirmModal>; } // eg inside PageWithConfirmModal.jsx let actions; if( DO_ACTIONS_FROM_MAIN_PAGE ){ actions = { save: callSpecificSaveAction, proceed: callSpecificProceedAction, close: callSpecificCloseAction, } } else if( ...