Gain insights into Redux fundamentals, explore application-based problems, and discover how to effectively manage state in React environments with this beginner's guide to state management.

This course is a beginner's gateway into the mechanics of using Redux as an application building platform. It takes a bottom-up approach, enforcing the basic aspects of Redux before incorporating them together in a creative and interactive way. It begins with a short theoretical section before moving on to application based problems. 
The course does assume that the user has a basic idea of how React works, as Redux works in the React environment. Let's dive in!

Understanding Redux: A Beginner's Guide To State Management

Let’s make sure the chat window scrolls when updated.

To do this we’ll need a bit of DOM manipulation. This is the reason I insisted on making \<Chats /> a class component.

Okay, let’s talk code.

Firstly, we need to create a **Ref** to hold the Chats DOM Node.


constructor(props) {
  super(props);
  this.chatsRef = React.createRef();
}

If you’re not familiar with React.createRef(), it is perfectly normal. This is because React 16 introduced a [new way to create Refs](https://reactjs.org/docs/refs-and-the-dom.html).

We keep a reference to this Ref via this.chatsRef 

In the DOM rendered, we then update the ref like this:

    <div className="Chats" ref={this.chatsRef}>

We now have a reference to the div that holds all the chat conversations.  

Let’s make sure this is always scrolled to the bottom when updated. 

Say hello to the lifecycle methods!

This focuses more on the React DOM instead of Redux. We need to create a ref for the Chat DOM and add commands for two instances: componentDidMount() and componentDidUpdate().

Getting to know Redux (Theory)

Your First Redux Application

Understanding State Updates with Actions

Building Skypey: A More Advanced Example

Building Skypey: Designing the State Object

Building Skypey: The User Component

Building Skypey: The Empty Screen

Building Skypey: The Chat Window

Building Skypey: Header and Chat Window

Building Skypey: Messaging

The Skypey App

Tweak: Scroll Removal for New Messages