How do I push my redux store to the modal I created? | Community
Skip to main content

How do I push my redux store to the modal I created?

  • February 8, 2022
  • 3 replies
  • 0 views
P

Hello,

I am developing a private app in React using Redux in the ticket side bar of support. I have a store with a provider at the top of my elements' tree.

I create a modal while clicking on a button that fires this snippet of code:

function getModal() {

    zafClient.invoke('instances.create', {

        location: 'modal',

        url: 'assets/index.html',

        size: {

            width: '80vh',

            height: '750px', //500px for purchases history, 750px for purchase details

        }

    })

        .then(function (modalContext) {

                //do when the modal is created

            var modalClient = zafClient.instance(modalContext['instances.create'][0].instanceGuid);

            modalClient.on('modal.close', function () {

                //do when the modal is closed

            });

        });

}

 
But when I click on the button every variable stored in the store are set to there initial state.

Is there a solution to push the context and the store of my application to the modal when I am creating it?

Thanks for your help

Paul

      3 replies

      E
      • Erica26
      • February 14, 2022
      Hi Paul,
       
      Would you be able to share a snippet of what the modalContext code looks like as well as where/when you're specifically setting the the state for it?
       
      Before seeing more of your code though, my first thought is to try utilizing localStorage to help persist the desired values of the variables. There's some info on how to do that with ZAF [here](https://developer.zendesk.com/documentation/apps/app-developer-guide/using-the-apps-framework/#using-local-storage).
       
      Hope to hear back from you soon!
       
      Erica - Dev Support
        P
        • Paul40
        • Author
        • February 15, 2022

        Hello Erica and thank you for your response,

        I found this documentation about localStorage and implemented in my code. It is working very well except one thing.
        When opening multiple tabs in Support and switching from one to another the modal's context doesn't follow because of depending of variable stored in the local of my browser.

        I have been said that you can store information in an GUID parent and make the modal communicate with its parent only.
        I have found a snippet of code here (https://developerblog.zendesk.com/making-modals-work-in-zaf-v2-251b7c940e58) but this look an old way to create a modal. I would like to adapt it to my redux store and my way (snippet of my first post) to create a modal.

        Thank you for your help, have a great day!

        Paul

        E
        • Erica26
        • February 16, 2022
        Hi Paul,
         
        Unfortunately, persisting state for your app/modal between multiple browser tabs isn't something we inherently support a solution for. I do know that there are several options on how to do this with Redux in general such as with WebSockets or building custom middleware on however, it is out of our scope at the moment on providing how to implement that. 
         
        The blog post you found is a great resource for creating modals in ZAF. It provides a solid solution for when you require the modal to know what specific parent instance is calling it so that you can make calls back to that instance for any necessary data. Such as, if your modal is being created by a specific ticket action you may want to be able to recollect which ticket created that modal instance to display ticket specific data.
         
        Feel free to let us know if you have any other questions!
         
        Erica - Dev Support
         
         
        Terms & ConditionsCookie settingsAccessibility statement