How to keep state when receiving server push via websockets?

Question

I have a react/flux application with websockets that works fine. All communication happens inside my WebSocketUtils file. Whenever I receive new data from my server as push events I trigger an action and let the whole Flux flow happen. In the end that causes my view to rerender.

The individual views are connected to my store via Higher Order Components. All new data is passed into my view as props. As these are changeable I use these props and set them as my initial state (which is ok).

Now let's say I have user A and user B looking at the same view of my application (on different machines of course).

1. User A edits some data
2. User B also edits some data
3. User A saves this new data
4. User B receives new data via push event and the view will rerender

Problem: User B lost all the data that was edited but not yet saved.

Any ideas how to solve this problem?

Answer 1

User WiredPrairie is correct in their comment. This isn't a React or Web Sockets problem, it's a problem with conflict resolution.

What would you expect to see in that situation? You would want the two states to be kept temporarily until you can either merge them automatically (unlikely) or present the user with some kind of interface to review their changes.

You could also prompt user B that user A is editing their data, just to keep them informed :)

A granular approach to editing would help - like in a Google Spreadsheet a user will often only edit a cell at a time, so in your situation you may only send field-level information across the wire (as opposed to record-level), and that would help avoid conflicts.

At the end of the day though, this is less about specific technology and more about your application: you need to work out how you'd like it to behave.