Closing form modal after submit success

Question

I am using Formik, Material-ui, Redux, and Redux-saga I have a form inside material-ui <Dialogue/>

On submit of form I trigger a submit request action which then is captured by the saga. The saga makes the api call and calls the success action.

The modals status isOpen is inside the component state

I need to hide the modal after the form submission succeeds.

How do I handle this?

Note: I am using React Hooks.

Answer 1

I personally prefer to just pass a callback to the action. So your action creator becomes:

function confirmDelete(itemId, onSuccess) {
  return { type: ..., itemId, onSuccess)
}

And in your saga you basically call(action.onSuccess) after your have done what you need successfully.

This pattern is not a best practice in general but it is Ok for closing a modal I think. Check this SO question for a discussion around this pattern: is it considered good practice to pass callBacks to redux async action?

Answer 2

then probably you need to call an action after the saga call success the action must set the value in reducer say like isModalClose:true in the form have a useEffect function like

    `useEffect(()=>{ if(props.someReducer.isModalClode) closeModalfn() },
[props.someReducer.isModalClose])`