There's no better strategy for learning a new technology than building your own version of it. In this course, we'll take that to the extreme. First, you'll start off by building your own Redux. Then, once you understand the ins and outs of Redux, you'll look at how to hook that up to a vanilla JavaScript UI. Then, you'll see how React and Redux work together by swapping out your UI with React.
Redux
7h 13m 23s
English
Paid
Redux is a 32-lesson 7 hours 13 minutes self-paced course by UI.dev (Tyler McGinnis). There's no better strategy for learning a new technology than building your own version of it.
Course facts
- Lessons
- 32
- Duration
- 7 hours 13 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- UI.dev (Tyler McGinnis)
- Price
- Premium
After that, we'll address the issues between our React and Redux implementation which will lead us to building our own version of the react-redux bindings. After all of this, you'll take your knowledge of the Redux ecosystem and build a real world application.
Pre-Requisites:
You'll be tempted to jump straight into Redux when you first start using React. Don't do this. If you're already familiar with React and modern JavaScript (ES2015+), this course is perfect for you. If not, this may not be the right starting point for you. Check out our 'React' and 'Modern JavaScript' courses which will be a better fit.
What you'll learn:
Redux
- createStore
- getState
- subscribe
- dispatch
- Reducers
- Actions
- Combining Reducers
- Middleware
- Thunk Middleware
- Logger Middleware
- Utilizing Constants
- Action Creators
- Architectural Patterns
- Redux with JS UI
- Redux with vanilla React
- Normalizing data structures
- Handling Asynchronous Events
- Optimistic Updates
- Error Handling
- Immutability
- Hot Module Replacement
- Time Travel Debugging
Advanced React
- Performance
- Higher Order Components
- React Router v4
- Render Props
- Context.Provider
- Context.Consumer
- Folder Structure
Who is this course for?
- Developers who are comfortable with React and are curious about what benefits Redux will give them.
- Developers who have been trying to learn Redux but are frustrated with the current ecosystem of learning resources.
- Front end developers wanting to modernize their skill set in order to get a raise or apply for another job.
- Mid to Sr level developers who are confident in their ability to learn quickly and want the quickest approach to learning Redux for production.
- Jr developers who are comfortable with JavaScript and React and want to better contribute to their Redux apps at work.
- Developers who want to understand how Redux works under the hood.
- Developers who want to learn how the react-redux bindings work under the hood.
- Developers who have tried and failed to learn Redux before.
Who teaches Redux? UI.dev (Tyler McGinnis)
UI.dev (formerly tylermcginnis.com) is the online course platform of Tyler McGinnis, a US developer who has been publishing React and JavaScript educational material continuously since 2014. The platform was one of the earliest dedicated React-tutorial sources and remains widely cited for the depth of its long-form courses on JavaScript fundamentals and the React ecosystem.
Course material covers React (including modern hooks-based patterns and Next.js), modern JavaScript (the canonical Modern JavaScript course), Firebase, GraphQL, Redux, TypeScript with React, and the algorithm / data-structure interview prep track. The teaching style is unusually rigorous about the language fundamentals underneath the framework material — Tyler's Modern JavaScript course in particular is a classic of the genre.
The CourseFlix listing under this source carries over 15 UI.dev / Tyler McGinnis courses spanning that range. Material is paid; UI.dev runs on per-course or membership pricing on the original platform.
What lessons are included in Redux?
0:00
/ #1: Redux Course Introduction
All Course Lessons (32)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Redux Course Introduction Demo | 05:13 | |
| 2 | The React-Redux Ecosystem | 09:19 | |
| 3 | Firebase Schema | 13:48 | |
| 4 | Redux Schema | 17:51 | |
| 5 | Redux Actions | 11:20 | |
| 6 | Part 1- Transforming State with Reducers | 14:51 | |
| 7 | Part 2- Transforming State with Reducers | 24:34 | |
| 8 | Up and Running with React and Redux | 07:05 | |
| 9 | Adding React Router to your Redux Project | 04:32 | |
| 10 | Improving your Developer Experience with Redux | 26:23 | |
| 11 | Home Route | 19:12 | |
| 12 | Authentication Mocks | 09:14 | |
| 13 | Connecting our first React Component to Redux | 29:34 | |
| 14 | Redux Thunks | 05:33 | |
| 15 | Route Protection with React Router | 18:31 | |
| 16 | Auth with Firebase | 24:58 | |
| 17 | Developer Tooling with Redux | 03:18 | |
| 18 | combineReducers in Redux. | 22:20 | |
| 19 | Saving data to Firebase in Redux | 22:20 | |
| 20 | Redux Listeners Module | 01:40 | |
| 21 | Firebase Listener | 13:57 | |
| 22 | Architecting a Redux React App | 16:59 | |
| 23 | Managing Normalized Data in Redux and Firebase | 08:42 | |
| 24 | Duck UI | 08:05 | |
| 25 | Fetching Initial Date with Redux and Firebase in React | 03:10 | |
| 26 | Profile UI | 25:20 | |
| 27 | Duck Details UI | 18:33 | |
| 28 | Creating Replies in Redux | 11:14 | |
| 29 | Lists in Redux | 13:48 | |
| 30 | URL State in Redux. | 04:32 | |
| 31 | Video 1- Refactoring to Immutable.js | 09:58 | |
| 32 | Video 2- Refactoring to Immutable.js | 07:29 |
Unlock unlimited learning
Get instant access to all 31 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionWhat courses are similar to Redux?
-
Updated 3y agoTinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
By: Fullstack.ioLearn to build a full app with React, TypeScript, Node, and GraphQL. You build features step by step and use clear patterns in a real project.30h 50m5/5 -
Updated 2y agoBuild a Spotify Connected App
By: Fullstack.ioLearn how to build a full stack web app to visualize personalized Spotify data with the help of Node.js, React, Styled Components, and the Spotify Web API.3h 47m5/5 -
FreeUpdated 2y agoNext.js - The Full Course
By: FireshipNext.js - The Full Course provides a in-depth look into the Next.js App Router introduced in version 13.2. It puts React Server Components into practice by buil1h 14m5/5
Frequently asked questions
What prerequisites should I have before taking this course?
Before enrolling, you should have a solid understanding of JavaScript and basic web development concepts. Familiarity with React is beneficial, as the course includes lessons on integrating Redux with React. No prior experience with Redux is necessary since the course starts with building your own Redux from scratch.
What will I build during the course?
Throughout the course, you will build your own Redux implementation and connect it to a vanilla JavaScript UI. Later, you will swap out the UI with React to see how React and Redux work together. Additionally, you'll work on integrating Firebase for data storage and authentication, and create a Redux-React app with features like routing and state management.
Who is the target audience for this course?
The course is designed for developers who have a basic understanding of JavaScript and are looking to deepen their understanding of state management in web applications using Redux. It's particularly useful for those who want to learn how to create scalable applications with React and Redux.
How does this course compare in depth to other Redux courses?
Unlike many other courses, this course takes a unique approach by having you build a version of Redux yourself. This hands-on strategy ensures a deep understanding of how Redux operates internally. It also covers integration with Firebase and React, providing a comprehensive view of using Redux in modern web applications.
What specific tools and platforms are covered in the course?
The course covers Redux, React, Firebase, and React Router. You will learn how to manage state with Redux and connect it with React components. It also includes lessons on using Redux Thunks for asynchronous actions and refactoring code with Immutable.js for better state management.
What topics are not covered in this course?
The course does not cover advanced topics like Redux middleware beyond Thunks, server-side rendering with Redux, or optimizing performance for large-scale applications. It focuses on fundamental concepts and practical integration with React and Firebase.
What is the time commitment for completing the course?
The course consists of 32 lessons, and the total runtime is not specified. However, given the depth of content, you should expect to spend several hours per week if you aim to complete it within a month. The time commitment may vary based on your prior experience with the technologies covered.