Functions and Nodes in Observable

[TajVirani]

I'm curious what the stance is on this with Legend-State. I know with things like Redux its not something you want to do as the methodology around Redux is that the entire state can be serialized, I was wondering if that is the same principle here.

A use case we have is that we have a monorepo with an npm workspaces folder for common modules, one being a websocket context that handles sending and receiving messages and executing functions based on specific topics. Our solution is to register with a useRef inside the provider the topic label and a function to execute. Now that this component is being moved to the workspace, I'm having a hard time figuring out how to get access to the map of labels / functions and maybe use Legend-State? Otherwise I can hoist the ref outside of the provider.... but with other modules we expose the legend-state state so that the application using the module can proxy their global state to the module state for ease of use and keeping this consistent across all modules would be ideal.

Any advice or guidance is much appreciated.

On an unrelated note, I started making a plugin like redux devtools to see global state as it updates, I didn't see anything already available. Is that a thing somewhere I just don't know about? Or is this something that is currently needed?

[jmeistrich]

Putting functions into an observable is totally fine, and a recommended pattern. Functions get extracted from the raw data and put into observable metadata, so when it's serialized into persistence it doesn't include the functions.

Does that answer your question? If not could you share a bit of code? I'm not totally following what you're trying to do.

A plugin like redux devtools is very much needed. We're planning to start building out dev tools like that after we release v3, but if you want to start it now that would be a huge help!

[TajVirani]

So I have a Websocket context that I'm loading from a common folder called modules. It handles messages like this sone { Topic: "cart.add", Data: { itemId: 'id' etc... }

So we need to execute a function in the UI of adding an item to the cart in this instance when we get the topic cart.add.

So I have a legendstate observable called "messageTopicMap"

const messageTopicMap = obserbable<{[topic: string]: (...args: any[]) => void>;

I have another piece of code that registers all our methods when the socket connection is made and does something like this for every topic

export default class ItemMessaging {

static register() {
messageTopicMap["item.addedorupdated"].set(itemMessaging.addedorupdated);
}

static itemMessaging.addedorupdated(args) { 
some things I want to do...
}
}

I also tried mergeIntoObservable as well.

const newMethods = {
      "item.added": ItemMessaging.addedorupdated,
      "item.updated": ItemMessaging.addedorupdated,
    };
    mergeIntoObservable(messageTopicMap, newMethods);
  }

Then in my websocket context, I have code that executes on a new message received:

const handler = messageTopicMap[message.Topic].peek();
        if (handler) {
          handler(message, getLimiter);
        }

But no matter how I write it typescript says its either {} or not a valid function. I tried messageTopicMap[message.Topic](message, getLimiter), I tried handler = messageTopicMapmessage.Topic. Does not want to play nice.

I'm glad we can put in functions though. I am probably not doing this correctly in the slightest.