mercredi 29 mai 2019

How to handle many modal types with different callback functions in a global component in React

I want to have a global Modal Component (let's call it a wrapper for the sake of the conversation, meaning that it renders a white box inthe center of the screen and greys out the backround), which essentially displays different nested modals and is controlled by redux state and also can be toggled through dispatched actions. The hard part is that I cannot simply hardcode those modals into the parent component and switch between them basing on the action payload (modalType property, for instance), because due to the application requirements I need to somehow pass a callback to some of those nested modals, so they know how to behave when users click Yes/Ok in a given situation. And also this behavior varies, depending on the current context. Sometimes pressing OK means dispatching a series of other actions, sometimes it navigates to another page etc. Essentially, the desired functionality is to somehow "continue" the process that is frozen by the modal appearance. Is there a built-in mechanism that somehow allows for a rather generic approach that does not violate good practices and React architecture? I don't want to keep callbacks in the redux store, neither I want to pass whole components as action arguments and link the wrapper to state. The latter is the current solution I found in the application when I've joined the project and I want to refactor it, because it's considered anti-pattern. Is there a possibity to somehow reference the components from which the showModal action is being called and then manipulate their inner methods?

Aucun commentaire:

Enregistrer un commentaire