Building Applications with React and Redux

Getting Started with Redux

You’ve learned how to build React applications and now you’re ready to learn Redux! To build Redux applications, there are key concepts to learn about first, as well as some initial project setup. 5 steps

• What is Redux? 3:53
• Why Redux? 3:10
• Redux Initial Setup - Dev Dependencies 2:34
• Redux Initial Setup - index.js 3:20
• Getting Started with Redux Review 6 questions

Modularizing the React Scoreboard Application

Now that you have a project setup with webpack, npm and eslint, the next step is to organize your application into different modules. In this stage, you'll implement a container component and various presentational components. Once you have modularized your components, it will be easier to apply Redux principles to the application. 8 steps

• Developing Your Component Hierarchy 3:30
• Building the Stopwatch Logical Component 5:49
• Building a Component Hierarchy 5 questions
• Building the Stats and Counter Pure Component 3:24
• Building the AddPlayerForm Logical Component 3:50
• Building the Player and Header Pure Components 4:30
• Cleaning up the Scoreboard Container Component 3:15
• Understanding Components as Modules 5 questions

Actions, Dispatch, and Reducers. Oh my!

This stage will focus on identifying the actions your application will take and what the application state will look like. This means defining action types, building action creators and breaking the application state into reducers. 6 steps

• Intro to Action Types 4:15
• Intro to Reducers 9:25
• Understanding Reducers 5 questions
• Actions and Action Creators 4:48
• The Road Travelled Thus Far 2:57
• Actions, Dispatch and Reducers Review 6 questions

Putting it all Together

It’s time to wire up your application to Redux! By the end of this stage, you'll have a fully functioning React-Redux application with development tools that make troubleshooting and debugging your application easier. Not to mention the modularity of your application will make it easier to track down and resolve issues or scale the application. 8 steps

• Creating the Redux Store 3:40
• Connecting the Scoreboard Container to Redux 10:10
• Understanding How Containers Connect to Reducers 5 questions
• Updating the Player, Counter and AddPlayerForm Components 6:17
• Adding Redux DevTools 3:52
• Challenge: The Player Detail Component 7:01
• Solution: The Player Detail Component 5:51
• Putting it all Together Review 5 questions