0

So I here is the case: say you have chat app written in the flux way, but now I also have a UserStore that keeps track of all the connected users. A Message has a text and the id of the user that sent the message. Users can change their name, so if a user changes its name, I want all the previous messages sent by that user to have its name updated.

The server sends this data to the clients:

Message = { id: int, text: string, authorId: int } User = { id: int, name: string }

And now I want to display each message:

User.get(message.id).name : message.text

Without the Flux pattern I would just add a field to Message that's a pointer to the User, i.e.

Message = { id: int, text:string, authorId: int, author: User }

And then I can just display it as follows:

message.author.name : message.text

But I feel this is not the "flux-way". So Now I have a MessageStore and a UserStore.

Question is: where should I retrieve the correct user from the UserStore to get its name to display it?

i) Should I put this logic in the MessageStore by adding an authorName and put a listener on the "CHANGE_USER" dispatch and then update the authorName appropriately?

ii) Or should I put this in the component that displays the message and there listen for the MessageStore and UserStore?

iii) Or why shouldn't I just update my MessageStore such that messages have pointers to users as I suggested isn't the flux-way?

Thanks.

EDIT: make it more concrete.

Acek
  • 133
  • 1
  • 9

1 Answers1

0

Interesting question...I can see a few different ways that could work.

If you messages are actually stored in a DB, and you just pull them into the store to use, then it'd be easy enough to update them in a DB, so there's the option.

Second way is, whenever you have messages displayed, like in the Chat window etc, just pass down the UserName as a prop...then when the username changes, it will change.

Example:

<div>{this.props.UserName} <div> {this.props.message} </div> </div>

It would also make sense as you said to have a UserID associated with each message, and that way you could just retrieve the name when you want to display messages.

If you add more details to how you specifically want to do do/display things I might be able to give a better answer :P...

SleepyProgrammer
  • 443
  • 1
  • 5
  • 15
  • Ok, so your second suggestion is to put it in the component I guess? Since you pass down the username as a prop, this means you need a parent component that listens for messages and users and for each message retrieves the user name from the user associated with that message. I'm not sure if I understand your first suggestion, but that is kind of what I want to do. Clients are kept up-to-date about users and messages through a socket with the server (which keeps it in a db). – Acek Apr 18 '15 at 06:35