Understanding Redux: A Beginner's Guide To State Management/

...

/

The Header Component

The Header Component

In this lesson, we'll access the updated state from the store (the update was made after we dispatched the setUserID action), and use it to display the selected contact's information in the header.

We'll cover the following...

Let’s begin with the Header component.

The current content of the chatWindow component is this:

Javascript (babel-node)
import React from "react";
const ChatWindow = ({ activeUserId }) => {
  return (
    <div className="ChatWindow">Conversation for user id:
      {activeUserId}</div>
  ); 
};
export default ChatWindow;

Not very helpful. Update the code to this:

Javascript (babel-node)
import React from "react";
import store from "../store";
import Header from "../components/Header";
const ChatWindow = ({ activeUserId }) => {
  const state = store.getState();
  const activeUser = state.contacts[activeUserId];
  return (
    <div className="ChatWindow">
      <Header user={activeUser} />
    </div>
  );
};
export default ChatWindow;

What’s changed?

Remember that the activeUserId is passed as props into the ...