Ix2 - state persistence

I need to be able to store the UI state, so it can be restored at a later point in time. I was successful in restoring the state of by subscribing to the redux store, and saving ixSession.eventState which I restored later by iterating over each item with store.dispatch(actions.eventStateChanged(key, value));

I tried to look through the ix2 implementation and it looks like the only way to invoke renderHTMLElement is by calling Webflow.require('ix2').actions.instanceAdded().

at first I thought I could extract the view state from ixElements[elementId].refState, but that’s impractical to convert it to the format that’s required for instanceAdded but that seems impractical as with the smallest change to the ix2 api it might break.

(here is the best of my progress so far, which does not work as it saves the html that does not preserve the click listeners that’s referenced in the state)

$(() => {

const ix2 = Webflow.require('ix2');
const store = ix2.store;


const eventStateStr = window.localStorage.getItem('eventState');
const html = window.localStorage.getItem('html');
if (eventStateStr && html) {
    const eventState = JSON.parse(eventStateStr);
    for(let key in eventState) {
        if (eventState.hasOwnProperty(key)) {
            const value = eventState[key];
            const actions = ix2.actions;
            store.dispatch(actions.eventStateChanged(key, value));
        }
    }

    document.documentElement.innerHTML = html;

    window.Webflow && window.Webflow.require( 'ix2' ).init();
    document.dispatchEvent( new Event( 'readystatechange' ) );
}

let oldEventState;
store.subscribe(() => {
    const ixSession = store.getState().ixSession;
    const eventState = ixSession.eventState;
    if (oldEventState !== eventState) {
        JSON.stringify(eventState)
        oldEventState = eventState;
    }
});


let oldIxInstances;
store.subscribe(() => {
    const ixInstances = store.getState().ixInstances;
    if (oldIxInstances !== ixInstances) {
        oldIxInstances = ixInstances;
        if (Object.keys(ixInstances).length === 0) {
            window.localStorage.setItem('eventState', JSON.stringify(oldEventState));
            window.localStorage.setItem('html', document.documentElement.innerHTML);
        }
    }
});

});
1 Like