Is there a way to make reusable modal with action buttons with Redux?

user_13288420 0
Viewed 104

I have a dialog message in a modal that asks the user to save changes if there is an attempt to navigate to another screen without saving.

It has 3 buttons (Save, Proceed without Saving, and Close). Obviously, the modal window looks exactly the same on all screens but the Save and Go back without Saving perform different actions depending on the screen.

I tried creating a separate Redux reducer for the modal but I learnt that you aren't allowed to store functions in Redux.

So my question is what is the recommended approach in a situation where you have the same modals in terms of UI but different in terms of the actions they perform?

I would really want to have it at the root level so that I can just dispatch an action and not be bothered with importing the modal to each component and controlling its state inside the component.

Here is an example of the action that I initially was planning to dispatch to show the 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;
        }
redux reactjs modal-dialog javascript
1 Answers

I would create a "wrapper" component like PageWithConfirmModal, and use it in each page component:

const MyCurrentPage = function( props ){

  return <PageWithConfirmModal
    showModal= { props.showModal }
    save=      { props.callSpecificSaveAction }
    proceed=   { props.callSpecificProceedAction }
    close=     { props.callSpecificCloseAction }
  >
    ... page content ...
  </PageWithConfirmModal>;
}

It depends where your payload.btnAction1 etc. come from, but you will figure out how to adapt my example, I guess.

Alternatively there are several possible variants, depending on your situation, e.g. pass some property that describes what to do instead of the actions, and decide which action to use inside the PageWithConfirmModal or inside the modal, e.g.:

const MyCurrentPage = function( props ){

  return <PageWithConfirmModal
    showModal= { props.showModal }
    whatToDo=  { DO_ACTIONS_FROM_MAIN_PAGE }
  >
    ... page content ...
  </PageWithConfirmModal>;
} 

// e.g. inside PageWithConfirmModal.jsx
let actions;
if( DO_ACTIONS_FROM_MAIN_PAGE ){
  actions = {
    save:    callSpecificSaveAction,
    proceed: callSpecificProceedAction,
    close:   callSpecificCloseAction,
  }
} else if( ...
user_75564570
Related