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

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

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 7 Hours | 2.98 GB

Use React, React Redux and Redux Saga, and master React Hooks and State Management with asynchronies call in React Redux

Greatly improve your abilities and increase your value as a React or front end web developer

This course will take you through the whole process of creating a complete application using React, React-Redux, and Redux-Saga. Step by step, improving the application further in each class:

The first part of the course will start by creating the UI for an amazing React application.

Next, we will make a refractory of this application into different stateless components.

After using React Hooks, we will add a state to the application, passing all the states via props.

In the next phase, we will add React Redux to easier control of the state.

Finally, we will introduce Redux-Saga to control the application’s side effects while making asynchronous calls to our API.

The main focus of this course is:

React: it is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components.”

React-Redux: one of the most used application state management. Redux maintains the state of an entire application in a single immutable state tree.

Redux-Saga: one of the most used frameworks to make easier to control our application side effects (i.e., asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, and better at handling failures

This course covers all you need to be the best Web Developer you can be.

What you’ll learn

  • React
  • React-Redux
  • Redux-Saga
  • React Hooks
  • State management
  • React Semantic UI
  • Web Development
Table of Contents

Initialising our React App
1 Create our react app
2 Importing SemanticUI to make our application pretty(er)

Creating our react app
3 Adding Income and Expenses
4 Creating our income and expense history
5 Add transactions
6 Add transactions

Creating components for our react app
7 Creating a MainHeader component
8 Create our ButtonSaveOrCancel React Component
9 Creating our NewEntryForm React Component
10 Refactoring our DisplayBalance React Component
11 Creating our DisplayBalances React Component
12 Creating our EntryLine React Component

Hooks, State and Props
13 Adding Hooks and State
14 Pushing changes to GitHub
15 Creating State using useState
16 Mapping a array of objects
17 Creating a component that renders multiple components
18 Adding keys to the repeated components
19 Adding a DeleteEntry function
20 Adding a new Entry
21 Adding a toggle to identify the type of entry
22 Creating a model to edit the entries
23 Formatting our modal
24 Making our components more reusable
25 Refactoring to manage the state
26 More Refactoring state
27 Making the modal work with useEffect
28 Final adjustments to state and we done
29 Calculating the totals using useEffect
30 Displaying totals, can we do some Redux now

Redux – Store, Dispatch, Actions and Reducers
31 Fixing warning and committing all the state changes
32 Create Redux Store
33 Dispatching actions with Redux
34 Dispatch with payload with Redux
35 Fixing the code and Subscribing to all store changes in Redux
36 Creating a new Redux Action
37 Creating Action Functions for Redux
38 Creating a Reduce
39 Combine Redux reducers in one store
40 Refactoring our Redux to Actions, Reducers and Store

React-Redux
41 React Redux combining our Redux with our React components
42 React Redux Hook useDispatch
43 Adding a new entry with React Redux Hooks
44 Using UUIDs for the entry ID
45 Installing and Configuring Redux Dev Tools

React Redux Devtools
46 Installing and Configuring Redux Dev Tools
47 Creating our first custom hook useEntryDetails
48 New Redux action and new Redux Reducer update entry
49 Creating a new Redux Store (and action and reducer)
50 Dispatching new actions to the new Redux Store
51 Open the modal after the dispatch
52 Closing the modal on dispatch
53 Loading the modal data
54 Making our custom hook even better
55 Adding an update dispatch to our custom hook
56 Firing 2 dispatches at once
57 Cleaning up the custom hook for easy use

Creating our Backend API using json-server
58 Installing json-server
59 Understanding the json-server backend

Adding Saga to our project
60 Installing redux-saga middleware
61 Creating and running our first saga

Understanding Generator Functions and Yield Returns
62 Introduction to Generator Functions and Yield Returns
63 Understanding infinity function generators
64 Driving the point home, Generator functions and Yield returns

Understanding the main Saga Effects
65 Understanding Saga Effect Take
66 Creating a function to automatically start all Sagas
67 Understanding Saga Effect PUT
68 Understanding Saga Effect CALL

Using Redux Saga to our project
69 Cleaning up the way for sagas
70 Removing the initial data from the reducer and fetching it from the backend
71 Creating part of our first real Saga using Take
72 Querying data from our saga using CALL
73 Adding data to the UI using PUT

Learning even more Saga Effects
74 Understand another Saga Effect FORK
75 Splitting our Backend to have two endpoints to use with Fork

Implement the new Saga effects on our application
76 Implementing Saga Effect FORK in our app
77 Getting all the entry details at the same time and update the UI as it arrives

Advanced Redux Saga Effects
78 Cleaning up the code before the more advanced challenges
79 Redux Saga Advanced Effect – TAKEEVERY
80 Saga Advanced Effects CANCEL and CANCELLED
81 Saga Advanced Effects TAKELATEST
82 Cleaning up the code before add the new Advanced Saga Effects
83 Deleting an Item (the long way)
84 Reviewing the Blocking Saga
85 Importing our Add Entries Saga to our Saga Initializer
86 Adding TakeLatest to our application
87 Updating the UI using PUT with TakeLatest