Which Life Cycle method to use of React while getting data from Database using Socket IO

Question

I'm storing data in a database and whenever it updates, It sends an event to the client side.

Here is server-side

socket.on("note delete", function(data) {
    rooms
      .findOneAndUpdate(
        {
          _id: data.roomId
        },
        { $pull: { notes: { _id: data._id } } }
      )
      .then(docs => {
        rooms.find({ _id: data.roomId }, function(err, docs) {

          socket.emit("remainingnotes", docs);
        });
      })
      .catch(err => {
        console.log("err", err.stack);
      });

remainingnotes is emitted on the client side. Now I want to update its content to this.state/MobX state real-time. as soon as database changes, I want my Store value to update accordingly.

How can I do this?

// Client Side
socket.on("remainingnotes", function(data) {
      ChatStore.msgs = data[0].conversation; // ChatStore is my MobX store.
    });

I've tried adding this event in Constructor and in ComponentDidMount but both didn't update. Is there any way to listen to events on the client side for React?

Will Stern · Accepted Answer · 2017-07-21 16:21:08Z

1

The data layer should be separate from the React layer, which is really a view layer.

With React + MobX, you'll do something like this:

MOBX STORE:

connects to websocket / manages connection
receives UI events from view/React layer
- updates store or
- sends websocket events (depending on the UI event)
receives events form websocket and updates store accordingly

REACT COMPONENT:

receives props from MobX store whenever data changes
sends events to MobX store

So the React component neither knows nor cares where the MobX store data comes from, it simply re-renders when the data changes and sends UI events to the store.

answered Jul 21, 2017 at 16:21

Will Stern

17.6k5 gold badges38 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Which Life Cycle method to use of React while getting data from Database using Socket IO

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related