I'm trying to synchronize my server and client's state with an object

this.setState({
    key: {}
})

On the server, I have a piece of logic that handles messages from the client and modify the entire object, key.

When listening for changes on the client, nothing comes up:

this.room.listen('key', change => {
    console.log('key state has changed');
});

unless I do:

this.room.listen('key/:id', change => {
    console.log('key state has changed');
});

But, I don't want individual attributes of the object that changed. I want the entire object.

Unless the whole point of state sync is to synchronize small changes, then would I just broadcast the new Key Object as a work around?

Any help or suggestions would be greatly appreciated!

You can catch all the properties by using:

// client-side
this.room.listen('key/:attribute', change => {
    console.log(change.path.attribute, "has changed to", change.value);
});

If you'd like to send the whole object directly, you can broadcast it from the server:

// server-side
this.broadcast(yourNewObject);

And catch it using onMessage signal:

this.room.onMessage.add(message => {
  console.log("here's the new object:", message);
});