how do you read data from a store outside of react?

[jmchuster]

Hi, so i've got a basic store set up like

    const ImageStore = new Store();
    ImageStore.getImages = () => ImageStore.useState(s => s.images);
    ImageStore.getFilter = () => ImageStore.useState(s => s.filter);
    ImageStore.setFilter = (filter) => ImageStore.update(s => s.filter = filter);
    
    const core = createPullstateCore({
        ImageStore
    });
    const instance = core.instantiate();

    render(html`
        <${PullstateProvider} instance=${instance}>
            <${ImageList} />
        </${PullstateProvider}>
    `, document.getElementById('divImageList'));

So I find that if I make calls from outside of a react component, I seem to be able to ImageStore.set values and they properly cause my React components to re-render. But if I ImageStore.get values, it starts returning random values. Interestingly, it seems to return the correct value as long as I only ever call a single getter outside of a React component.

So the question is, how should you interact with a store outside of a react component?

Thanks,
Jonathan

[lostpebble]

Hi Jonathan,

If you really need to get a store's state outside of React- the recommended way is to use Store.getRawState() - which will return the actual state snapshot of that store at that time. Using hooks outside of React components will give you weird results, like maybe what you're seeing.

Also- I wouldn't recommend adding functions directly on their store class like you're doing here. Internally, the class recreates itself at some points (after server rendering and such) and it might lose those properties. Rather just create a separate object called ImageStoreActions or something that's external to the store, to hold those functions.

Hope that helps!