0

I am making modal by referring to the link below with react hook.

How can I display a modal dialog in Redux that performs asynchronous actions?

The state of the modal is managed by Redux. I want to run some "function" when the modal is closed. However, this "function" should only work on a specific component, so when I open a modal in a specific component, I want to pass this "function" to the modal. But I'm not sure is it okay to pass and store the "function" to Redux. I did a lot of searches, but still I'm not sure.

I would really appreciate if someone would let me know if this is correct or not. Thanks for your reading.

SpecificComponent.jsx

const saySomthing = () => {
   console.log("Now modal is close.");
}

const openModal = () => {
    dispatch({
       type: SHOW_MODAL, 
       modalProps: {
             handleClose: saySomthing
    })
}

Modal.jsx

const dispatch = useDispatch();
const modalProps = useSelctor((state) => state.modal.modalProps);

const handleClose = () => {
    modalProps.handleClose();
    dispatch({type: HIDE_MODAL});
}
abbey
  • 213
  • 2
  • 7
  • 17

1 Answers1

0

You should not do that. Put a non serializable data in the Redux store state you can get more details in the Redux Best Practice Documentation.

You can do that but that can bring in some unexpected behavior

Yves Kipondo
  • 5,289
  • 1
  • 18
  • 31
  • Thanks for the comment. If so, do I have to store all the specific modal's state in redux store and then run function(eg. saySomthing() in my question) in reducer? – abbey Sep 02 '20 at 08:51
  • You can save the state of the modal **(HIDDEN || SHOW)** in the Redux store state, and based on that value you can specify how you handle the event which switch the state of the modal from hidden to show. – Yves Kipondo Sep 02 '20 at 09:01