React, React Redux and Redux Saga – Master React State/Hooks

Course Curriculum

Chapter 1: Initialising our React App

Lecture 1: Create our react app

Lecture 2: Importing SemanticUI to make our application pretty(er)

Chapter 2: Creating our react app

Lecture 1: Adding Income and Expenses.

Lecture 2: Creating our income and expense history

Lecture 3: Add transactions

Lecture 4: Add transactions

Chapter 3: Creating components for our react app

Lecture 1: Creating a MainHeader component

Lecture 2: Create our ButtonSaveOrCancel React Component

Lecture 3: Creating our NewEntryForm React Component

Lecture 4: Refactoring our DisplayBalance React Component

Lecture 5: Creating our DisplayBalances React Component

Lecture 6: Creating our EntryLine React Component

Chapter 4: Hooks, State and Props

Lecture 1: Adding Hooks and State

Lecture 2: Pushing changes to GitHub

Lecture 3: Creating State using useState

Lecture 4: Mapping a array of objects.

Lecture 5: Creating a component that renders multiple components

Lecture 6: Adding keys to the repeated components

Lecture 7: Adding a DeleteEntry function

Lecture 8: Adding a new Entry

Lecture 9: Adding a toggle to identify the type of entry

Lecture 10: Creating a model to edit the entries

Lecture 11: Formatting our modal

Lecture 12: Making our components more reusable

Lecture 13: Refactoring to manage the state

Lecture 14: More Refactoring state

Lecture 15: Making the modal work with useEffect

Lecture 16: Final adjustments to state and we done

Lecture 17: Calculating the totals using useEffect

Lecture 18: Displaying totals, can we do some Redux now?

Chapter 5: Redux – Store, Dispatch, Actions and Reducers

Lecture 1: Fixing warning and committing all the state changes

Lecture 2: Create Redux Store

Lecture 3: Dispatching actions with Redux

Lecture 4: Dispatch with payload with Redux

Lecture 5: Fixing the code and Subscribing to all store changes in Redux

Lecture 6: Creating a new Redux Action

Lecture 7: Creating Action Functions for Redux

Lecture 8: Creating a Reduce

Lecture 9: Combine Redux reducers in one store

Lecture 10: Refactoring our Redux to Actions, Reducers and Store

Chapter 6: React-Redux

Lecture 1: React Redux combining our Redux with our React components

Lecture 2: React Redux Hook useDispatch

Lecture 3: Adding a new entry with React Redux Hooks

Lecture 4: Using UUIDs for the entry ID

Lecture 5: Installing and Configuring Redux Dev Tools

Chapter 7: React Redux Devtools

Lecture 1: Installing and Configuring Redux Dev Tools

Lecture 2: Creating our first custom hook useEntryDetails

Lecture 3: New Redux action and new Redux Reducer update entry

Lecture 4: Creating a new Redux Store (and action and reducer)

Lecture 5: Dispatching new actions to the new Redux Store

Lecture 6: Open the modal after the dispatch

Lecture 7: Closing the modal on dispatch

Lecture 8: Loading the modal data

Lecture 9: Making our custom hook even better

Lecture 10: Adding an update dispatch to our custom hook

Lecture 11: Firing 2 dispatches at once

Lecture 12: Cleaning up the custom hook for easy use

Chapter 8: Creating our "Backend API" using json-server

Lecture 1: Installing json-server

Lecture 2: Understanding the json-server backend

Chapter 9: Adding Saga to our project

Lecture 1: Installing redux-saga middleware

Lecture 2: Creating and running our first saga

Chapter 10: Understanding Generator Functions and Yield Returns

Lecture 1: Introduction to Generator Functions and Yield Returns

Lecture 2: Understanding "infinity" function generators

Lecture 3: Driving the point home, Generator functions and Yield returns

Chapter 11: Understanding the main Saga Effects

Lecture 1: Understanding Saga Effect Take

Lecture 2: Creating a function to automatically start all Sagas

Lecture 3: Understanding Saga Effect PUT

Lecture 4: Understanding Saga Effect CALL

Chapter 12: Using Redux Saga to our project

Lecture 1: Cleaning up the way for sagas

Lecture 2: Removing the initial data from the reducer and fetching it from the backend

Lecture 3: Creating part of our first real Saga using Take

Lecture 4: Querying data from our saga using CALL

Lecture 5: Adding data to the UI using PUT

Chapter 13: Learning even more Saga Effects

Lecture 1: Understand another Saga Effect FORK

Lecture 2: Splitting our Backend to have two endpoints to use with Fork

Chapter 14: Implement the new Saga effects on our application

Lecture 1: Implementing Saga Effect FORK in our app

Lecture 2: Getting all the entry details at the same time and update the UI as it arrives

Chapter 15: Advanced Redux Saga Effects

Lecture 1: Cleaning up the code before the more advanced challenges

Lecture 2: Redux Saga Advanced Effect – TAKEEVERY

Lecture 3: Saga Advanced Effects CANCEL and CANCELLED

Lecture 4: Saga Advanced Effects TAKELATEST

Lecture 5: Cleaning up the code before add the new Advanced Saga Effects

Lecture 6: Deleting an Item (the long way)

Lecture 7: Reviewing the Blocking Saga

Lecture 8: Importing our Add Entries Saga to our Saga Initializer