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
Resolve the captcha to access the links!