React, Redux, and enigma.js

[Francis_Kabinoff]

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.

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.

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.