React-Redux and Modern Redux Toolkit RTK with Async Thunk

Learn how Redux centralizes global state in a React app, using a single store instead of lifting state up. Compare Redux with useState, useReducer, and useContext.

Centralize the app state in a single Redux store to avoid prop drilling and enable components to request data from the store with predictable updates.

Discover how Redux provides a single source of truth for JavaScript apps by managing global state with a predictable, immutable store that works with any framework.

Explore when to use use context versus Redux for state management, highlighting Redux for large apps with centralized state and middleware, and context for smaller apps.

learn how to set up redux from scratch by installing node and npm, initializing a package.json, adding redux as a dependency, and running a basic script.

Grasp the three core Redux concepts—store, action, and reducer—through a pizza shop analogy. See how the store holds state, actions describe requests, and reducers update the state.

Explore the three essential Redux principles: single source of truth, read-only state, and pure reducer functions, driven by a Redux store and actions that describe state changes.

Visualize three Redux principles: a single store holds the app state, the app subscribes to the store, dispatch actions, and reducers return an immutable state through a one-way data flow.

Define a Redux action as a plain JavaScript object with a type, use a constant like orderPizza to avoid typos, and create an action creator that returns the action.

Explore how a Redux store holds the entire app state, offers getState for access, enables subscribe for listeners, uses dispatch to update state, and supports unsubscribe via the returned function.

Create a Redux store to hold the application state via a reducer, get state, subscribe, and dispatch with action creators like order pizza, and note migration toward Redux Toolkit.

Explore Redux through a pizza shop analogy, upgrading to burgers with separate reducers for pizza and burgers, tracking pizza bases and burger buns. Separate chefs show scalable, clear state management.

Learn how to create multiple reducers for pizza and burger, using initial states and action creators like order pizza and order burger, and ensure the store receives a single reducer.

Combine pizza and burger reducers with combine reducer to form a root reducer, pass it to createStore, and dispatch actions to update the global state, accessible as state.pizza.pizzaBase and state.burger.burgerBuns.

Explore how redux uses a store as a single source of truth, dispatching actions to reducers (with types and payload) to update state and rerender UI.

Explore how middleware extends Redux by handling asynchronous calls and side effects between dispatch and reducer, keeping data fetching and other logic centralized and outside components and reducers.

Install Redux logger and integrate it as middleware to log actions and state changes, then attach it via applyMiddleware when creating the store for debugging.

Fetch data from an API using async actions in Redux, updating loading, products, and error states to drive the user interface.

Implement async action logic with action creators and a reducer to manage loading, products, and error states, and create a Redux store using createStore for a complete data fetch flow.

Learn how Redux thunk middleware enables asynchronous API calls with Axios, using action creators that return functions, dispatching fetch request, success, and error to update the store.

Bind Redux with React using the official React-Redux binding and set up a Redux-enabled app. Build a pizza box component and render a simple order pizza action to demonstrate setup.

Explore two professional redux folder structures: feature-based vs a dedicated redux folder inside src, separating actions, types, reducers, and store, while keeping components in a separate folder.

Create an action creator for order pizza, use a constant from pizza types instead of a string, export and import it across files, and return a Redux action to dispatch.

Create a pizza reducer with an initial state of 1000 pizza bases. Switch on action.type to handle order pizza, decrement the base, and export the pizza reducer.

Create and export a redux store with the pizza reducer, then wrap the app with the React Redux provider to give all components access to the store.

Learn how mapstatetoprops connects redux state to a component, enabling access to state and dispatch, so the pizza base count can update via dispatched actions and the reducer.

Map dispatch to props to access the dispatch function and map action creators to a component prop, dispatching the order pizza action from the Redux store.

Connects a component to the Redux store via the connect function, using mapStateToProps and mapDispatchToProps. Access pizza base and order pizza props and dispatch actions to update the store.

Explore what hooks are and how they empower functional components to manage local state and side effects, and simplify subscribing to the store and dispatching actions without mapStateToProps or mapDispatchToProps.

Explore the useSelector hook in react-redux to access redux state directly, replacing mapStateToProps, and retrieve the pizza base value (initially 1000) for display.

Learn to access the Redux dispatch function with the useDispatch hook, dispatch actions via an action creator, and compare with legacy mapStateToProps and mapDispatchToProps using useSelector and useDispatch.

Implement logger middleware in a React app to log Redux actions and state changes, install redux-logger, configure applyMiddleware with createStore, and view logs in the console.

Explore how to install and use the Redux DevTools extension to debug state, configure compose with DevTools, resolve version conflicts with legacy_deps, and inspect actions and state transitions.

Demonstrates passing customer input as an action payload to a redux reducer, dispatching with that number to decrement burger buns, using a controlled input and defaulting to one when absent.

Learn to implement async actions in a React Redux app by structuring state with loading, products, and error, defining fetch request, success, and error actions, and wiring reducers and store.

Learn to implement Redux Thunk for async get requests in a React app, including Axios integration, dispatching fetch actions, and handling loading and error states.

Convert from map state to props and map dispatch to props by replacing connect with useSelector and useDispatch, access product data, error, and loading, and dispatch fetch products on mount.

Explore how the immer library simplifies updating nested redux state with produce and draft state, avoiding manual copies, while redux toolkit uses immer behind the scenes.

Explains how dispatching actions reaches multiple reducers, showing how the pizza and burger reducers respond to the same action, and introduces extra reducers in Redux Toolkit to manage this behavior.

identify common Redux learning mistakes, such as learning Redux and React in parallel, overusing Redux for state, mutating state in reducers, and neglecting payloads, with Redux Toolkit as a remedy.

Explore Redux basics and interview topics, explaining what Redux is, why it's used in React, core principles, actions, reducers, store, middleware, thunk for async, selectors, and devtools.

Discover how Redux Toolkit reduces boilerplate, simplifies configuration with configure store, and handles async logic with create async thunk, while enforcing immutability and performance.

Redux Toolkit is an updated, all-in-one library that simplifies redux development across JavaScript frameworks, auto-generates action creators, sets up thunk middleware and developer tool, and uses Ember behind the scenes.

Initialize the project with npm init, install @reduxjs/toolkit, and set up app/store.js with feature folders like pizza and burger for scalable redux state management.

Generates action types and action creators automatically for a slice, reduces boilerplate, and enables mutative logic with Immer, while keeping actions, types, and reducers in one place.

Use Redux Toolkit's createSlice to build a pizza slice with initial state pizza base 1000 and a pizza order reducer that decrements it, exporting the reducer as default and actions.

Configure store with Redux Toolkit to automatically combine reducers, add thunk and devtools, and manage slices like pizza with actions such as pizza order.

Create a burger slice with Redux Toolkit, defining initial buns state and a burger order reducer. Export actions and reducer, configure the store, and dispatch actions to see state updates.

Apply logger middleware in Redux Toolkit by installing redux-logger, configuring the store with getDefaultMiddleware, and concatenating the logger to log dispatch information.

Explore how Redux Toolkit uses extra reducers to let a slice respond to actions from other slices, demonstrated with a pizza and burger order scenario.

Define and use createAsyncThunk to perform api requests in Redux Toolkit, auto-handling pending, fulfilled, and rejected states. Define the thunk, handle it with extraReducers in a slice, and dispatch it.

Learn to perform asynchronous actions with Redux Toolkit using create slice and create async thunk, handling pending, fulfilled, and rejected lifecycles via extra reducers.

Set up a React app with Redux Toolkit using Vite, install dependencies including @reduxjs/toolkit, and run the development server to scaffold a Redux-enabled project.

Design and implement a pizza and burger application using Redux Toolkit by creating slices, exporting actions, and configuring the store to manage state with reduced boilerplate.

Create pizza and burger components in a React app, setting default values of 200 pizza bases and 50 burger buns, and add order buttons to render these views in app.js.

Install react-redux and wrap your app in the provider to expose the store to all components, passing the store as a prop.

Learn how to access Redux state with the useSelector hook in React-Redux, selecting values like pizza base and burger buns from the store and rendering them in components.

Use the use dispatch hook to access the redux dispatch function and dispatch pizza or burger order actions, with extra reducers enabling cross-slice updates.

This lecture shows how to decrement pizza bases and burger buns using redux actions with payload, while keeping the input field as local state via a controlled component.

Set up redux devtools by adding the Chrome extension and refreshing the app. Observe actions and state as you dispatch, such as order pizza, in the dev tool for debugging.

Fetch products data in a React Redux app using Redux Toolkit and createAsyncThunk with Axios, and render loading and error states.

Explore common Redux Toolkit interview questions, including differences from plain Redux, createSlice, createAsyncThunk, configureStore, immutability handling, boilerplate reduction, middleware, and testing async actions.

Explore a Redux Toolkit powered demo that adds, edits, saves, and deletes tasks, includes delete all and input validation, and reinforces Redux and Redux Toolkit concepts.

Set up a Redux Toolkit project with React and React Redux, create store and a to do slice, build list components, and run the dev server to preview the app.

Create a to do slice with Redux Toolkit's createSlice, defining name, initial state as empty array, and reducers for add, update, delete, and delete all; export reducer and action creators.

Configure the redux store with redux toolkit's configureStore, combine the todos reducer from the to do slice, set up middleware and devtools, and export the store for all components.

Build an add todo and todo list with a controlled input using a state hook, featuring add task, delete all, and a Packback item with edit and delete buttons.

Learn to add tasks to a redux toolkit state by dispatching an add task action with id and text, then render the list and clear the input after each add.

Display all tasks by selecting the to-dos from the Redux store, map the array to render each item with edit and delete actions, and dispatch only non-empty tasks after trim.

Shows per-task editing in a to-do list by clicking edit to activate an input for a specific item, swap to a save button, and update its text with state.

Learn to edit and save a to-do item by dispatching an update with the task id and new text, then update the state and reset edit id and text.

Delete a single todo by filtering the state array with the clicked id, and clear all tasks by setting the state to an empty array in Redux Toolkit.

Congratulate learners on completing the course and urge them to apply Redux and Redux Toolkit concepts to real-world projects, practice coding, and keep experimenting.