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

In the just concluded Hello World example, a possible solution you may have come up with for grabbing the state from the STORE may look like this:

class App extends Component {
  state = store.getState();
  render() {
    return <HelloWorld tech={this.state.tech} />;
  }
}

What do you think? Will this work?
Just as a reminder, the following two ways are correct ways to initialise a React component’s state.

(a)

class App extends Component {
 constructor(props) {
   super(props);
   this.state = {}
  }
}

class App extends Component {
  state = {}
}

So, back to answering the question, yes, the solution will work just fine. 

`store.getState()` will grab the current state from the *Redux STORE*.

However, the assignment, `state = store.getState()` will assign the state gotten from Redux to that of the < App /> component.

By implication, the return statement from render i.e `< HelloWorld tech={this.state.tech} />` will be valid.

Note that this reads `this.state.tech` NOT `store.getState().tech`. Even though this works, it is against the ideal philosophy of Redux.

If within the app, you now run, `this.setState()`, the App’s state will be updated without the help of REDUX.

This is the default React mechanism, and it isn’t what you want. You want the state managed by the Redux STORE to be the single source of truth.

Whether you’re retrieving state, as in `store.getState()` or updating/changing state (as we’ll cover later) you want that to be entirely managed by Redux, not by `setState()`.

Since Redux manages the app’s state, all you need to do is feed in the state from the Redux STORE as props to any required component.

Another big question you’re likely asking yourself is, why did I have to go through all this stress just to have the state of my App managed by Redux?

Reducer, Store, createStore blah, blah, blah ... 

Yeah, I get it.

I felt that way too.

However, consider the fact that you do not just go to the bank and NOT follow a due process for withdrawing your own money. It’s your money, but you do have to follow a due process.

The same may be said for Redux.

Redux has its own “process” of doing things. We’ve got to learn how that works - and hey, you’re not doing bad!

This lesson teaches us about some of the rules and conventions of working with Redux. Instead of directly accessing the state, we use the store to receive the state as props.


Possible Gotcha

This lesson teaches us about some of the rules and conventions of working with Redux. Instead of directly accessing the state, we use the store to receive the state as props.

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

Possible Gotcha