Search⌘ K
AI Features
Home
Courses
Understanding Redux: A Beginner's Guide To State Management

The Messages Field

Explore how to design the messages field within the Redux state by using objects and booleans to differentiate user and contact messages. Understand mapping messages with unique user IDs to handle multiple conversations efficiently and learn about normalizing the state for better management.

We'll cover the following...

We currently have the messages as an array with message objects.

Javascript (babel-node)
messages: [
  {
    messageTo: 'contact1',
    text: "Hello"
  },
  {
    messageTo: 'contact2',
    text: "Hey!"
  } 
]

We will now define a more appropriate shape for the message objects. A message object will be represented by the message object below:

Javascript (babel-node)
{
    text,
    is_user_msg
};
widget

The text is the displayed text within the chat bubble. However, is_user_msg will be a Boolean - true or false. This is important to differentiate if a message is from a contact or the default app user.

Looking at the graphic above, you’ll notice that the user’s messages ...