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

Each time the store updates and invokes render, let’s log the state from the store.

Here’s how:


const render = () => {
  fancyLog();
  return ReactDOM.render(<App />, document.getElementById("root"));
};

Just call a new function, **fancyLog()** you’ll soon write. Here’s the fancyLog function:

function fancyLog() {
  console.log("%c Rendered with 👉 👉 👇", "background: purple; color: #FFF");
  console.log(store.getState());
}

Hmmm. What have I done?

**Console.log(store.getState())** is the bit you’re familiar with. This will log the state retrieved from the store.

The first line, **console.log("%c Rendered with 👉 👉 👇 ", "background: purple; color: #fff");** will log the text, ”Rendered with ...” plus some emoji, and some CSS style to make it distinguishable. The %c written before the *”Rendered with ...”* text makes it possible to use the CSS styling.

Enough talking. Here’s the complete code:

# index.js:

Now we'll write a function which logs all our store updates. This will be helpful in understanding if our contacts component is working properly.

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

Logging the State Object