
Explore Redux as an open source, JavaScript based state management library that centralizes data, enables direct access from components, ensures data consistency, and provides Redux DevTools for debugging.
Install Node.js and Visual Studio Code on Windows, Mac, or Linux to run JavaScript outside the browser, enabling frontend and backend development and local testing.
Create a new React application by running the appropriate command to generate the project scaffolding, then open the folder in Visual Studio Code to prepare for installing dependencies.
Perform code cleanup by deleting unwanted files in the public folder and updating the index file, then run npm start to see a welcome message in the app.
Explore the Redux lifecycle by tracing how components create and dispatch actions, which reducers consume to update the central store, and how this flows into code.
Create a product action types constants file and implement actions for all products, selected product, and remove product, outlining type and payload for each Redux action.
Connect your React app to a Redux store using the Provider, then debug with Redux DevTools to inspect state and actions in real time.
Apply styling to React components using inline styles and CSS classes, create a page not found with flex centering, font size, and reddish color, and import styles in tsx.
Design and implement a reusable product component, render it across the products page with grid styling, and integrate a guard component while preparing a fake API data fetch.
Fetch all products from the fake story API using axios and a one-time use effect call, then log and print the data to populate the product list on the page.
Learn how to extract a product id from the URL using a hook, fetch the product details with Axios, and update the central state for the product detail view.
Dispatch the selected product to the reducer using useDispatch and useSelector, update store with payload, register the reducer in the index file, and reflect the updated product in the component.
Learn to style a product details page with a responsive container grid and glass UI, and show data using conditional JSX while handling loading state from a central store.
Add routing on the logo to navigate without refreshing the page in a single-page application, using a header link with an exact '/' home route to reach the audio stream.
In this course, you will Learn React Redux in the most simple way through real world example and
hands-on project based approach.
Following are the topics we will cover:
1.1-What is Redux
1.2-Redux real world explanation
1.3-Installing nodejs and VS code
1.4-Creating new react application
1.5-Code cleanup
1.6-Understanding React application flow and JSX
1.7-Installing the required npm packages
1.8-Redux lifecycle
1.9-Creating the required folders
2.1-Creating Actions and Action constants
2.2-Creating product reducer
2.3-Combine all reducers
2.4-Creating the product store
2.5-Redux DevTools and Provider
2.6-Creating components template files
2.7-Understanding the package json file
2.8-Creating and Understanding first react component
2.9-Creating skeleton for all other components
3.1-Implementing static and dynamic routing of components
3.2-Applying styling to components by inline style and css class
3.3-Accessing state information from store inside component
3.4-Designing the Product Component
3.5-Get Fake Product List in All Products component from API
3.6-Dispatch action from the component
3.7-Modifying the reducer to update the state information
3.8-Styling and displaying all products on the home screen
4.1-Dynamic Navigation to Product Detail page on click of a product
4.2-Get Product Id from url and get product details from the API
4.3-Dispatch the selected product to the reducer and get it back in component
4.4-Styling Product Details page and showing data with conditional JSX
4.5-Adding routing on the logo
4.6-Remove the previous product and directly load the product on details screen
4.7-Exploring Action and State information on redux Dev Tools
You will learn about various react hooks.
You will get the complete source code for the course.