Qlik Community

Ask a Question

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Francis_Kabinoff
Employee
Employee

If you are creating an app with React, Redux, and enigma.js, you may be wondering when and where to create Qlik session objects, and how to handle getting and updating data from those objects.

The first decision to make is whether you want to be storing the data received from the Qlik object (by using the getLayout() method or the getHyperCubeData() method for example) in component state or globally in Redux. This decision may change from project to project or even from object to object. Generally, if the data is only needed in the component, like when creating a visualization, I bypass Redux and just use React component state. But if the data will be needed globally at the app level, then I use Redux.

 

WHEN I WANT TO USE COMPONENT STATE

When using component state, I create the Qlik session object and get data when the component mounts and I destroy the session object when the component unmounts because there’s no reason to have a session object around longer than it needs to be. I use a render prop pattern to make it reusable. I’d  have one component whose job it is create and destroy the session object, and pass the object along to the component to be rendered. And then the component to be rendered would usually be a visualization in this case, and depending on the circumstance, may want to use different methods available on a generic object, such as getLayout(), or getHyperCubeData(), or selectHyperCubeValues(), or any of the other methods available on a generic object. Those two components, and their usage, would look like this.

viz.png

sessobj.png

view.png

 

WHEN I WANT TO USE GLOBAL STATE

If I want data from session objects stored in Redux to access globally, the pattern I’ve used before works like the below flow chart.

reduxflow.png

 

The idea is that I create modules that export promises that resolve to the session object, and then when a component mounts that needs the data it will first check to see if that object has been loaded before and if not call a thunk who awaits the promise that resolves to the session object, and then subscribes to changes in the object and dispatches another thunk whose job it is to get the data from the session object with either getLayout() or getHyperCubeData() or some similar method and format it and then finally dispatch an action to Redux with the formatted data as the payload which can then store the data and also set some loaded flag to true.

If anyone is interested in a code sample of this, let me know.

8 Comments
dionverbeke
Luminary Alumni
Luminary Alumni

Hi,

Do you have a working example of this approach. We are using vanilla javascript today, but would like to upskill our knowledge.

 

Dion

1,959 Views
andyjalexlive
Contributor III
Contributor III

Hi Francis,

 A code sample of this would be great. I'm especially interested how making selections would force a another object  to re-render and display the newly associated data? I understand that you could combine the reducers but really what I'm talking about is calling a multi-action action creator i think..

Thanks 

Andy

0 Likes
1,161 Views
rarpecalibrate
Contributor III
Contributor III

Hi @andyjalexlive ,

Qlik have a library using hooks. There is a example - https://github.com/qlik-oss/hamus.js/tree/master/example.

Regards,

Ryan Arpe

0 Likes
1,151 Views
andyjalexlive
Contributor III
Contributor III

Hi Ryan

That example only has one chart as far as i can see so i don't see how it answers my question.

thanks

Andy

0 Likes
1,133 Views
rarpecalibrate
Contributor III
Contributor III

Hi,

Qlik has an association engine which re-renders all the charts when a selection is made - no muti action needed. The example is a newer version on how to use engima.js and the qlik engine APIs. 

Ryan Arpe

0 Likes
1,119 Views
andyjalexlive
Contributor III
Contributor III

Ok thanks, thats interesting. I'm using vanilla js and engine at the moment, maybe i'll to switch to React.

Andy

1,098 Views
pedromuacho
Contributor
Contributor

Hello Francis,

I would be very grateful if you could send me an example using the redux global state.

I am trying to understand how  would you subscribes to changes in the session object and then trigger the different updates on the hypercubes definitions that are centralized in the store.

 

Thank you,

Pedro

 

 

0 Likes
513 Views
andyjalexlive
Contributor III
Contributor III

Hi Pedro 

I m looking into this as well. I don’t have an example for you but I found this Udemy course to be very helpful

redux recipes 

https://www.udemy.com/share/102GBeBUMScldTQ3o=/

0 Likes
488 Views