lostpebble / pullstate

Simple state stores using immer and React hooks - re-use parts of your state by pulling it anywhere you like!

Home Page:https://lostpebble.github.io/pullstate

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Question] Proper method to read from multiple stores outside of a function component?

student020341 opened this issue · comments

Hey, loving the simplicity that pullstate is giving me for building a reactive ui with a global store. There are a few pieces to this question I could not find in documentation or existing issues and I suspect what I'm doing is not the right way:

I have a chart with some data. A store is populated with some default data for a default range of time. A user can change this time range which modifies a value in a store of filters. In my file that defines my stores/controllers/whatever (anything outside of the ui components), how would I go about having the main data store react to this change in filter and pull new data? They are separated because there are elements of the data that are present in other ui where filters are not.

Ideally what I'm looking for is a way to subscribe to the filter and also somehow get the value of some data to do some context specific decisions about how that filter change happens. I'm currently achieving this by subscribing to the filters and grabbing data from myStore.getRawState(). Even if this is acceptable, is there a proper/better way to do this? I suspect if I combined my stores I could grab the data I needed from the 'allstate' parameter, but I thought I'd ask now for future situations where having multiple stores merge into 1 isn't feasible.

Hi @student020341 ,

Yes, currently there's not a "right" way to do this kind of cross-store stuff. Generally, you'd keep all state that affects each other in the same store.

But if you had to do it, you could use subscribe on one store- which then runs an update() on another using the value which is passed into the subscribe listener (you don't need to use getRawState()). For example:

ChartStore.subscribe((s) => s.timeRange, (timeRange) => {
  FilterStore.update(s => {
    s.startTime = timeRange.startTime;
  });
});

This kind of cross-store interaction is something I've been thinking about and would like to solve better in the future. Especially to have the ability to "batch" updates which occur across multiple stores to the renderer.

Thanks, I suspected that might be the case. I'm using a subscription on a filter to watch it for changes to update some data but a 'subscription' doesn't fit the use case exactly for getting a snapshot of the current state of the other store since I want to unsubscribe right away afterwards. If there's no down side to looking at the raw state to get a snapshot in this case I think I would choose it as a solution for now.

I would combine them, but a lot of unrelated models use the filters to update.

RXJS has a lot of subscription combining (and other) operations if you are looking for ideas. Or maybe using rxjs is a short term solution.