onChange stopped working with multiple stores

[pinkkis]

I have components that used a single store, and many components used the same one, each adding their on onChange as needed. As the store got larger, I wanted to split it into 2-3 stores that are limited in scope.

My components looked to be working fine, and they could all read and write the stores, but eventually I noticed that the onChange was not firing for any components other than the "parent" wrapper I have that wraps all the other components, as it's the one that loads some configs that go into the store.

It could be that it's just that it's the first component to be defined and run and calls the stores.

Running stencil/core 2.9 and store 1.5

[splitinfinities]

Can you help by adding a reproduction repo? Thank you so much!

[Serabe]

If it helps, we only register components that read from the store in the render cycle. If you add a reproduction repo, I can take a look.

[pinkkis]

Hey, I have spent some time looking into this, and reverting and so on, and looks like I was wrong about what was causing this.

The way I was using the stores was like this:

export const appStore = createStore<AppStore>({ ... });

and then use it elsewhere with just

import {appStore} from '../store/app-store.ts`

appStore.state.foo = 'bar';
appStore.onChanges('foo', () => {});

and that didn't seem to work in many situations. Initially, i had a

private appStore = appStore;
private appState = appStore.state;

in my main component class, and everything was working. Once I had remove this it seems things broke.

I've now changed my store to be split again, but i have this:

// app-store.ts
const store = createStore<AppStore>({});
const { state } = store;
export { store, state };

// index.ts
import { store as appStore, state as appState } from './app-store';
export {appStore, appState};

and now things are working again. Maybe I wasn't keeping some sort of reference to the stores by exporting them directly, or maybe the es6 export const isn't caching the same way as node resolving modules, and thus I was getting different instances of the store in the end.

I'm closing this issue with this, as it's working, but please feel free to comment on this if you know what was happening and either if it's intended or what.

Thanks and sorry for posting for nothing :D