1

You have a server that sends the client data. A JSON object. {"name": "folder1", size: "2406"}

The client updates it's data: data = newData

And the client is updated. Reactive frontend coding as usual.

However the client needs to keep it's own state. It also has isOpen for that folder. So it's object looks like this. {"name": "folder1", "size": "2406", "isOpen": false}

This allows the user to toggle the folder opened and closed.

However we can no longer assign it to the client data when new data comes from the server, because the isOpen property would be overwritten. data = newData // isOpen is gone now

1 solution would be to have a merging of the data when it comes from the server. That seems fine but sloppy.

Another would be to maintain 2 different states. That seems very sloppy.

What is the best way handle client only data in a reactive application?

1

1 solution would be to have a merging of the data when it comes from the server. That seems fine but sloppy.

Why do you consider merging to be sloppy? I think this is the appropriate solution to your stated problem. I would encapsulate this logic in a function:

updateState(prevState, newState) {
  // merge new state into prev state and return the merged state
}

data = updateState(data, newData)

In a framework like React, your state is managed, so I would do the same thing as above but with this.state and this.setState() calls.

Another would be to maintain 2 different states. That seems very sloppy.

In a React + Redux application I typically store shared data in the redux store (usually it's from the backend) and store component only--transient state in React component state. This may or may not be suitable to your needs. Does the server state need to be persisted across component dismounting? Does the client state need to be persisted across component dismounting?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.