Learn Redux

Setting Up Our Webpack Environment
1
Use NPM and Webpack to get our local environment setup for development.
App Layout + Component Setup
2
Let's talk about what needs to happen in terms of React.js components and layout.
Creating our Single and PhotoGrid components
3
Use React to create the two main components in our React app - Single and PhotoGrid.
Setting up React Router
4
Integrate React Router to handle page changes into our React app
Creating our Redux Store
5
Let's start talking about Redux and how we will create a Store to hold our data.
All About Redux Actions
6
Before we can update our store, we need to learn about what actions are.
All About Redux Reducers
7
Reducers handle the updating of our state in our store and are a fundamental concept in Redux.
Integrating our Store with React Router
8
Let's get everyone on the same page and let React Router know about our store.
Understanding The Reducer's Job and Dispatching Actions
9
How does the Reducer update state? What is it's job?
Accessing Dispatch and State with Redux
10
We already learned about actions, how can we then dispatch these actions to allow the reducer to update our state?
Displaying Redux State inside our Components
11
Let's take a break from actions, action creators and reducers for a second a see how we can pull our state into the components at the level we wish.
Updating State with Reducers
12
Once the action has been dispatched, we can use reducers to update our state.
Displaying the Single Photo Component
13
We already are displaying a list of photos, but what about when you click through to the Single photo component?
Displaying and Adding Comments
14
Let's pull in the data from our other store and display it there.
Updating Comment State in our Store
15
Once the comments are displayed, how can we add new comments and delete existing ones?
Redux Reducer Composition
16
When your state gets a little complicated, it's best to use composition to narrow down the peice of state you are trying to update.
Error Tracking and Insights with Sentry
17
How do you get info on errors that happen in the browser of your user? We integrate Sentry intro our application to track errors and get context on what happened.
Hot Reloading Redux Reducers with webpack
18
Hot reloading is like live reload, but for your JavaScript!
Learning Redux Dev Tools
19
Learn all about the power of the Redux dev tools to inspect and time travel with your actions.
Wrap Up and Next Steps
20
You did it! Your first Redux application - what should you learn next?

Some nice things people have said

Learn Redux (https://t.co/WZ0mUOiBBA) by @wesbos is AMAZING!
— Matheus Lima (@matheusml) May 17, 2016

So thankful @jennschiffer tweeted out the video series at https://t.co/i4ha0alRHO by @wesbos, it finally let redux click for me
— Bread unslicer (@JohnFrimmel) May 17, 2016

I'm learning Redux with @wesbos https://t.co/wBAv2q9A9D
You come up with great stuff.Learning from him is a cakewalk through technology
— sachin (@sachitaware21) May 16, 2016

React for beginners is one of the best React tutorials out there now it's time for Redux! https://t.co/myNL54neE5 @wesbos
— John Ferrie (@johnferrie) May 16, 2016

Ready to take the course?

What is this?

Meet Wes Bos

Why is this free? What's the catch?

The Videos

Setting Up Our Webpack Environment

App Layout + Component Setup

Creating our Single and PhotoGrid components

Setting up React Router

Creating our Redux Store

All About Redux Actions

All About Redux Reducers

Integrating our Store with React Router

Understanding The Reducer's Job and Dispatching Actions

Accessing Dispatch and State with Redux

Displaying Redux State inside our Components

Updating State with Reducers

Displaying the Single Photo Component

Displaying and Adding Comments

Updating Comment State in our Store

Redux Reducer Composition

Error Tracking and Insights with Sentry

Hot Reloading Redux Reducers with webpack

Learning Redux Dev Tools

Wrap Up and Next Steps

Some nice things people have said