Rendering the Active User
The first thing we need to do is set up an action which is dispatched when we clicked on a contact. This action will set the active user, which is the first part of building our chat window.
We'll cover the following...
Below is the layout for our complete chat window:
Have a look at the logic within the <Main /> component. <ChatWindow /> will only be displayed when activeUserId is present.
Right now, activeUserId is set to null.
We need to make sure that the activeUserId is set whenever a contact is clicked.
What do you think?
We need to dispatch an action, right?
Yeah!
Let’s define the shape of the action.
Remember that an action is just an object with a type field and a payload.
The type field is compulsory, while you can call the payload anything you like. Payload is a good name though. Very common too.
Thus, here’s a representation of the action:
{type: "SET_ACTION_ID",payload: user_id}
The ...