React Redux Ultimate - State Management (/w Typescript, JWT)

Explore why Redux enhances React applications by centralizing the cart count state, avoiding prop drilling, and simplifying access to shared data in an e-commerce UI.

Learn the redux core concepts, including actions, dispatchers, and reducers, and see how an event triggers an action, which the dispatcher sends to the reducer to update the store.

Set up a React application with Vite and initialize the project. Integrate Redux by installing the Redux library and running npm run dev.

Learn to set up Redux in a React application using Redux Toolkit, while exploring vanilla Redux concepts, create a root reducer, store, and provider with React-Redux.

Demonstrates building the first redux app by dispatching an add_count_by_one action on button click and updating state via a reducer, using useDispatch and useSelector.

Learn how to access redux state with the useSelector hook, pull the count from the root reducer, and replace passing props down with redux in child components.

Learn how to dispatch an unbox gift action with a payload in a React Redux flow, using the reducer to return the action payload, a gift such as an iPhone.

Learn why in redux reducers you must return a new object when updating user state, using a copied state and a change name action to trigger re-render.

Understand the difference between React and Redux and how Redux concepts like store, action, reducer, and dispatcher enable state management in React apps using useDispatch and useSelector.

Learn to fetch a fake API without redux thunk by using useEffect, useState, and an async fetch call to JSON placeholder, then render user names from the response.

Move the logic into Redux by removing local state, dispatching a fetch_users action with data as payload, and enable Redux Thunk to handle async operations.

Integrate redux thunk in a react app to handle asynchronous actions by configuring the store with applyMiddleware, creating async actions, and dispatching them from useEffect.

Explore how redux thunk moves asynchronous logic out of components, turning actions into functions that thunk middleware handles to fetch data, then dispatch reducers, reducing component code.

Learn to manage api calls with Redux by handling pending, fulfilled, and rejected states using try-catch, dispatch, and reducer logic.

Discover how Redux Toolkit reduces boilerplate and prevents typos by providing configureStore, createReducer with Immer, and helpers like createAction and createSlice, wiring the provider and counter slice, with thunk included.

Explore what a slice is in Redux Toolkit, combining reducer and action, and see how Immer enables direct state modifications while Redux Toolkit auto-generates action creators and handles dispatch.

Learn how to dispatch an action with a payload in Redux, pass a parameter such as 5, and access payload in the action and reducer to update state.

Learn how to fetch data with redux toolkit using createAsyncThunk and set up a post slice. Handle pending, fulfilled, and rejected states with extraReducers and access API data via action.payload.

Learn best practices for redux thunk and redux toolkit, managing isLoading and API error state, and updating data flow.

Explore how extraReducers work with fetch API, covering use cases where they handle actions not specific to a single slice and can respond to actions from other slices.

Create a components folder, build a UserTable.jsx, import it, and set up a Navbar with a primary theme while aligning the table columns (id, name, email) to db.json.

Fetches data from a json-server api using axios inside an async function, stores it in state, and renders it in a table with edit and delete actions and bootstrap styling.

Set up React Bootstrap in a project by installing axios, modifying main.jsx, importing Bootstrap CSS, and running a sample button example.

Practice setting up a JSON server to fake an API for a Redux Toolkit workflow, including npm init -y, installing json-server, creating db.json, and running a localhost API.

Set up a React Bootstrap modal to perform create, read, and update actions, wiring a UserModal component to a button that toggles visibility with show and handle close logic.

Design a user modal named create new user and embed a name and email form within the modal body, importing the form and removing unnecessary elements.

Create a user form with controlled name and email inputs, post the data to a JSON server using axios, and verify creation after saving.

Implement the delete user feature by lifting state up, passing the delete id via props, dispatching a delete by id action, refreshing the user list, and showing a notification.

Learn to manage promise states with Redux Toolkit using an extra reducer for pending, fulfilled, and rejected statuses, and implement isFetchLoading-based loading indicators and error handling.

Lift state up to implement a light/dark mode, passing mode and set mode to the user table and header, using the data-bs-theme attribute and a checkbox toggle.

Learn to add Redux state with an app slice, implement changeMode, dispatch actions, and read state with useSelector to enable dark mode across the app via the html data-theme attribute.

Learn to persist redux state on page refresh using local storage without redux persist, dispatching actions and saving with localStorage.setItem for dark and light modes.

Practice takes priority as you learn to use json-server to fake an API and get your code running without over-engineering, with future lessons on react-query, error handling, and pagination.

Set up a new project for JWT authentication using Vite and React, and learn how to integrate the provided Node.js backend code with npm install and npm run dev.

Install and configure essential packages for a React project, set up routing with react-router-dom, and use react-bootstrap and axios for UI and API calls within a Redux state management workflow.

Create and organize React components using a component folder, React bootstrap button, and snippets to scaffold post, register, and login forms, while updating main.jsx and App.jsx.

Set up react router dom in a React project by configuring routes in main.jsx and defining the home path and register and login components. Consult the documentation.

Learn how to implement nested routes with a shared header, using React Router Dom's outlet to render login and register forms within a Root component.

Set up a Nest.js backend by cloning the project and running start:dev. Register a user, obtain a JWT token, and create posts with a bearer token using sqlite.

Learn to configure the index route and implement the Link component for client-side routing in a React Router app, updating header navigation and routes for home, post, login, and register.

Design and implement bootstrap-based login, register, and post forms, wiring first name, last name, email, password, title, and description to the API.

Set up redux by creating a store.js in a redux folder, wire it to main.jsx with a provider, add a user slice, include a counter slice, and install react-redux.

Implement the user registration flow in a React Redux app using Redux Toolkit and axios.post, updating form data and dispatching register actions via createAsyncThunk with extra reducers.

Register account by dispatching a register action and handling the submit event. Navigate to the post page after receiving an access token and user data in the payload.

Handle register submission failures, prevent navigation on empty input, and use isAuthenticated with useEffect and useSelector to redirect to post after success, while removing password from redux.

build a login function with redux: useDispatch, useSelector, and useState, dispatching login account to authenticate via /login and navigate to /post on success when isAuthenticated.

Create a protected route in a React Redux app that redirects unauthenticated users to the login page when creating a post, with redux store reset, and useSelector in main.jsx.

Persist Redux state by saving the access token, first name, and an authenticated flag to local storage, so refreshing the page restores data and allows creating posts to work.

Create a redux post form with a post slice and thunk, manage title and description, and attach a JWT bearer token from local storage to axios requests.

Set up a Redux flow to fetch and display posts in a React app, using axios and localStorage tokens, and useSelector to render post titles and descriptions.

Discover how Firebase offloads backend tasks in a React app, letting frontend developers focus on UI with NoSQL database, authentication, and cloud functions.

Set up firebase in a react application by creating a firebase project, registering a web app, installing the firebase package, and initializing firebase with the provided config in src/services/firebase/index.js.

Create reusable Firebase Firestore access by moving getDocument logic into a Firebase service file, implementing getDocument(collection, id) that returns docSnap.data or null and shows usage.

Fetch all documents from a Firestore collection using getDocs and collection, then map each snapshot to an object with doc.id and doc.data(), returning the results.

Learn how to add a document from a React app to Firestore using set doc or add doc, including manual or auto-generated ids and a form with title and description.

Update a document by selecting add data, using a docRef reference, and passing collection name, document id, and data to the update doc.

Learn to delete a document in a Firebase collection by supplying the collection name and document ID, using the delete doc function and useEffect to remove data and refresh.

Set up Redux by creating a redux folder, a store.js, and a post slice, then configure the provider and integrate with Firestore for CRUD practice.

Set up components from scratch by installing react bootstrap, creating register, login, and post forms, wiring a table component, and configuring react router dom in main.jsx.

Explore Firebase authentication with email and password, implementing create user with email and password using async/await, wiring the register UI, exporting auth utilities, and enabling email/password in Firebase console.

Set up nested routes with React Router DOM, using the app as the root and the outlet component to render login and register pages.

Wire firebase authentication to a redux-driven user state, observe auth changes with onAuthStateChanged, and manage the current user via a user slice and async thunk in a nested route app.

Implement a set current user action in a Redux slice, dispatch it with useDispatch, and update state with action.payload while debugging with console logs.

Implement a sign out function using Firebase authentication in a React Redux app, wiring a button to trigger signOut and reset the user in the store, observing login state changes.

Explore how React Query manages server state and asynchronous data operations like fetching and updating, contrast with Redux for client state and Redux Thunk, and learn about caching benefits.

Prepare backend for the React Redux Ultimate course by cloning the GitHub repository, installing json-server and nodemon, and running a delayed API to demonstrate how React Query works.

Set up the React Query frontend by installing the library, creating a QueryClient, and wrapping the app with QueryClientProvider, noting that data loads after a few seconds.

Learn to set up Neptune in a React Query app by following the getting started steps, copying the import line, and wrapping the app in the client provider.

Learn to replace redux with useQuery in react query, define a query key and a promise-based query function to fetch and manage data with optional chaining.

Learn to manage API states with isLoading and isError, show error messages, and implement auto retry in a React Redux setup using TypeScript and JWT for secure data fetching.

Explore the stale concept in data management within React Redux, demonstrating how data becomes stale after edits, how freshness toggles with fetches, and how delays affect immediate updates.

Explore pagination in a React app using an API with limit and by parameters, render results in a table, enable item selection, and manage dynamic page updates with React Query.

Identify how a null user id breaks the app by fading the user model, and fix it by returning an empty object for the user id on the virtual server.

Understand how to use the useMutation hook to create, update, and delete data, pass data via mutation handlers, and trigger immediate notifications with automatic data refresh.

Learn how to invalidate data after a mutation by wiring on success and on error side effects, trigger notifications, and refresh the relevant query cache using mutation and query hooks.

Set up a React project with TypeScript, install dependencies, open the project in Visual Studio Code, and configure tsconfig.json to guide TypeScript compilation to JavaScript.

Explore primitive types in TypeScript with examples of numbers, strings, booleans, any, and never, showing type errors when mismatched and why avoiding any matters.

Explore reference types in TypeScript by creating a person variable, assigning an object, and experimenting with version overrides and type errors when a string isn't assignable to a layer's size.

Explore working with a function that takes an object parameter, demonstrates declaring and inferring types, and shows how inputs affect the function's return value.

The lecture introduces the TypeScript interface keyword, defines an interface named IcePerson with string name and number age, and shows how interfaces make code easier to read and write.

explore optional properties in TypeScript interfaces, using the question mark syntax to allow a property to be number or undefined, and understand how missing properties affect type checking.

This lecture demonstrates using generic types in TypeScript to create a swap function that works with numbers, strings, and booleans, avoiding type mismatch errors.

Learn how to use useState with TypeScript to enforce strict types, handle union types like string or number, and define interfaces to model user data with generics.

Pass props to a React component by wiring a user object into a table component with a typed IUser prop, and verify the data by logging props during rendering.

Build a form with name and email, handle onChange to update the name, and type the input event in TypeScript for correct event handling.

Learn to handle React forms in TypeScript by wiring a submit event, preventing default, and logging the email with a typed React.FormEvent and click handlers.

Update a user object through a change handler and a setUser prop. Use the spread operator to immutably update the user array and trigger a rerender with useUser.

Learn how to work with the React children prop in a component, resolve TypeScript type errors, and use ReactNode to restructure and render children.

Explore the child prop pattern in a React and TypeScript title component, enforce prop types, and handle missing title errors to render the correct title.

Learn how to convert a React JavaScript project to TypeScript by cloning the repo, configuring src files, updating index.html, and integrating Redux Toolkit through practical steps.

Change the app component to TypeScript by renaming jsx files to tsx, address redux imports, and set up proper HTML element typing to complete the conversion in this hands-on video.

Define the Redux state data type in TypeScript by comparing type aliases and interfaces for primitive types like string, boolean, and number, and apply the chosen type to the store.

Define strong TypeScript types for useSelector and useDispatch in a Redux setup. Reuse shared data types and leverage app selectors to streamline component access.

Define a prop interface for a typescript user delete modal. Use the released model class, boolean open flag, and a close handler, with useSelector and dispatch of a delete action.

Develop the user modal with TypeScript interfaces, thunk actions, and dispatch wiring to update or create a user, handling id, name, email, membership, and view selector.

Explore handling an optional property by separating the producer from the consumer, masking the optional in a user file, and passing user input from the user interface to here.

Define a TypeScript type for the redux slice around user data, specify user id as number, refine user table props, and wire the editor UI to manage and reflect state.