Connecting React & Redux

Video Lectures

Displaying all 7 video lectures.
Lecture 1
How Redux Works
Play Video
How Redux Works
This Redux tutorial series will show you the schematics of a Redux application. Redux is AWESOME, but it takes a bit to get it setup. There really aren't a lot of moving parts, but there are a lot of ways that you can configure it - namely - configure the store.

Redux is like Flux in several ways, but it's different as well. It has these pieces:
- Provider: wraps your application, injecting the store
- Store: one large store that contains the state for your entire application
- Reducers: reducers listen to actions and make changes on the store values. They also cannot mutate the data on the store in any way, but must return a new set of data.
- Actions: pretty much just like flux actions, the only difference is that async can be handled in multiple different ways depending on store "middleware"
- Components: React components can be injected with various pieces of store data. React components also trigger Redux actions. This is what makes it all come together.
Lecture 2
Immutable JS
Play Video
Immutable JS
Immutable Javascript means that we're never going to change a value once it's been set on an object. It might sound complicated, but it's really quite simple. We simply always create new objects and copy their values over.

If you want to learn Redux for React.js applications, you have to know how to code immutable JS objects, since it's built upon that. Instead of changing values on a store, we write reducers to modify those values and return a new object instead.
Lecture 3
Basic Redux Introduction
Play Video
Basic Redux Introduction
Let's build a bare-bones Redux app to help you understand how simple it can be. Redux is incredibly simple once you understand where everything goes and what's happening under the hood.

GET THE CODE! https://github.com/learncodeacademy/react-js-tutorials

In this React Redux tutorial, I'll give you a Redux Introduction that shows the bare-minimum requirements to get a Redux app started. You'll notice that there isn't even a React application that I'm using. That's because Redux is not based on React, although it plays beautifully with a React ecosystem.

Redux is an elegantly simple way to manage state for your applications. React, Angular...almost any app can plug into a Redux store.
Lecture 4
Multiple Reducers with Redux Reducers
Play Video
Multiple Reducers with Redux Reducers
Once your store is in place, you'll want to set up multiple Redux reducers to act on parts of your data store. Redux reducers are great in that they are only aware of part of your data, and the rest of the data is neither reachable nor able to be mutated by your reducer.

GET THE CODE! https://github.com/learncodeacademy/react-js-tutorials

Reducers are a great concept in Redux, because they allow your react application to have specific pieces of data that all update synchronously. All reducers run against your Redux store, and then the store triggers a change event and your entire React.js application re-renders.

The biggest thing to keep in mind with Redux reducers is you don't want to mutate your state. ALWAYS return a new state rather than mutating the old state values.
Lecture 5
Redux Middleware Tutorial
Play Video
Redux Middleware Tutorial
Redux middleware is awesome, it allows you to keep the simplicity of Redux, yet extend it's functionality. Adding global things like loggers, error handlers, etc are incredibly simple.

In this react redux tutorial, we're going to create a redux logger middleware and error handling middleware that intercept every redux action in our react.js app.

As you see, adding redux middleware to our react app is incredibly easy.
Lecture 6
Redux Async Actions
Play Video
Redux Async Actions
Async Actions with Redux are a piece of cake...you just have to know what to do. Handling Ajax in Redux is as simple as firing off several actions: one for start, one for completion, one for error.

Dispatching multiple, synchronous actions allows your React layer to still be a 100% static representation of the state of your store. So React itself will never have any application state, only your store will. This is the biggest hangup of developing React/Redux applications - where do you keep state? Once you learn that 100% of the application state lives in the store, everything gets drastically simpler in Redux.
Lecture 7
Connecting React & Redux
Play Video
Connecting React & Redux
React and Redux play together REALLY well. Here's how to connect your Redux store with a React.js application. As you can see, using React + Redux makes your application very scalable.

Redux provides a complete application state and React is just the view layer, so as Redux changes, React views are updated. React.js components can also listen to only the pieces of the Redux store that they care about, so no matter how big the store gets, the Reactjs component stays clean and simple.