Skip to main content

Design

The Design blog is all about product and Qlik solutions, such as scripting, data modeling, visual design, extensions, best practices, and more!

Announcements
Welcome to Qlik Community! Check out our new navigation! FIND OUT MORE
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

2,167 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,369 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,359 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,341 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,327 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,306 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
721 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
696 Views