Complete Guide to Redux-Toolkit & RTK Query with React JS

Review the starter code for a Reader Toolkit project with a bootstrap 5 layout, a blog publish form and block list, and an initial store configuration with no reducers yet.

Create a blog slice with Redux Toolkit, define and rename the initial state, export the reducer actions, and hook up the blogs reducer into the store under the blocks key.

Learn to use a selector to access blog state from the store, render blog blocks (id, title, content, user), and replace hard-coded headings with a dynamic blog list.

Add a blog action inside the reducer to capture title, body, and user ID, and export the corresponding action creator while following redux toolkit conventions to avoid state mutation.

Explore how Immer.js powers reducers in Redux Toolkit slices, enabling you to write code that looks like mutating state while Immer produces new state under the hood.

Create a users slice with an initial user list, export a selector for all users, and hook the reducer into the store to enable selecting a user from a dropdown.

Select all users from redux toolkit slice, map over them to create dropdown options with user ids and names, and verify the dropdown shows John Doe, Nancy, and James Bond.

Modify the add blog action to pass the user id and update the prepared callback to accept it, ensuring blogs publish with the correct user attribution.

Display the publishing user's name by selecting all users with useSelector, matching the user id. Show the name or unknown user and disable the submit button until fields are filled.

Learn to show like/unlike counts by dispatching actions in a React Redux Toolkit app. The lecture demonstrates exporting and using a blog-specific action to update and display blog like counts.

Review how we implemented features like add, block, and like or dislike a block with redux toolkit in a React application, and preview the upcoming middleware concept.

Understand how createAsyncThunk in Redux Toolkit handles asynchronous actions, producing pending, fulfilled, and rejected lifecycles, and how to connect it to reducers and store state.

Set up a React app with Redux Toolkit and RTK Query by creating the project, installing dependencies, and applying material design styles in the public HTML.

Structure a Redux Toolkit and RTK Query React app by organizing folders for components, containers, and Redux, and build a home with cocktail list and a single cocktail detail view.

Configure Redux Toolkit in your app, create an asynchronous thunk to fetch cocktails, handle pending, fulfilled, and rejected states with extra reducers, and display results on the homepage.

Build a search component by wiring input fields in visual studio code, configuring text inputs and component structure, and outlining subsequent logic for the homepage.

Render the cocktail list on the home page by selecting state, dispatching an initial load, and mapping cocktails to show image, name, and glass with a details page link.

Build a single cocktail detail view in a react app using redux toolkit and rtk query, fetching by id, managing loading state, and rendering ingredients, instructions, and image.

Implement search with createAsyncThunk in redux toolkit to fetch cocktails from the API, dispatch the action, and update the cocktail list based on user input.

Wrap up: reinforce redux toolkit and RTK Query in a React app by building CRUD operations and a think tank, and preview delete and put requests in the next section.

Build a basic form to fetch data by id, with input fields and two buttons, dispatching actions and navigating after creating a post using Redux Toolkit and RTK Query.

Create a React app by managing title and body state, handling changes, and submitting to create a post, then navigate to the home page using React Router.

Dispatch a post creation using createAsyncThunk, handle the form submission with prevent default, display a loading state, and render the newly created post below the form using the Redux store.

Dispatch a put update using createAsyncThunk to modify a blog post body, manage edit mode, and save changes, reflecting the updated body value in RTK Query.

Apply Redux Toolkit to perform operations and create a think tank in a React app, integrating it into a React project and reinforcing Redux Toolkit concepts learned in this section.

Wire apiSlice into a React app by wrapping the entire app with the API provider and importing the apiSlice to enable custom hooks across components.

Use the useGetTodos query in a TodoList component to fetch todos from a JSON server, handle loading and isSuccess, and render the todos with reduced boilerplate.

Learn to implement mutations in apiSlice with RTK Query, including add, update, and delete operations on todos, using proper method, url, and body to update the JSON data.

Identify why cached data prevents real-time updates after mutations and learn to invalidate the cache so new to-dos and deletions appear without refreshing.

Explore how to use redux toolkit and RTK Query to invalidate cache after mutations and auto-refetch data, keeping the to-do list up to date with loading indicators.

Explore transforming API responses with RTK Query in a React app to control todo ordering using response transformation and callbacks, preparing for the API provider replacement next.

Set up a random user application by bootstrapping a React TypeScript project with a template, install dependencies (including icons), and open the project in Visual Studio Code to proceed.

Clean up the project by removing the unused features folder, unused imports and header elements, then ensure the app loads cleanly in the browser.

Demonstrates building a full crud contact application in React with Redux Toolkit and RTK Query, enabling create, read, update, delete, and view operations against a simulated server.

Set up a React project for Redux Toolkit and RTK Query, install dependencies, and prepare a data file and server script to run the client and view initial data.

Show data with RTK query by fetching contacts in a react app, displaying a table with name, email, and contact, with delete and view actions, plus loading and error states.

Handle errors with RTK Query in a React JS app by showing toast notifications. Configure react notify and prepare for a contact form with name, email, and content.

Learn to post data with Redux toolkit RTK Query in React.js by creating a contact mutation and a new hook to add contact details as an object.

Use RTK Query to add a new contact by validating name, email, and content, preventing default form submission, and dispatching a contact mutation to update the UI and navigate home.

Populate the existing user data into name, email, and contact fields by fetching the record with an id and updating the form with rtk query in a redux toolkit setup.

Shows how to update a contact using RTK Query mutations in a React app, updating by id with name, email, and contact fields.

Consolidate your knowledge of Redux Toolkit and RTK Query by applying them in a React JS app, and deepen your understanding of the course material.

Explore redux-saga overview and how generator functions orchestrate side effects like API requests, data fetching, and local storage in React apps, enabling easier, synchronous-looking code and improved failure handling.

Develop actions and sagas to fetch movies with Redux Toolkit and RTK Query in a React JS app, including defining endpoints and exporting movie actions.

Handle errors and render the movie list in a React app using Redux Toolkit and RTK Query, managing data and error states from the movie slice.

Build a single movie page with Redux Toolkit and RTK Query using React JS, displaying the movie title, plot, director, cast, image, and back navigation to the home page.

demonstrates a shopping cart app built with redux toolkit and rtk query in a react app, showing quantity updates, total recalculation, item removal, and cart clearing with router toolkit refresh.

Set up a new shopping cart project with React and Redux Toolkit, create a structured folder layout with a card container and product files, and prepare for RTK Query integration.

Configure redux toolkit in this React app by setting up the router toolkit, configuring the store, and wiring the provider to connect product items with title, price, image and amount.

Build a redux toolkit powered navbar by wiring a number component to the cart state with useSelector and dispatch, using material UI components.

Build a shopping cart in React using redux toolkit, dispatch, and useSelector to manage items, quantities, and the total, with actions to increase, decrease, remove items and clear the cart.

Develop a redux action to compute the cart total by reducing cart items, updating total amount and total count from item quantities and prices.

Introduce building a food recipe app in react using RTK Query to fetch recipes from a third-party API, enable search and health category filtering, and display details in a modal.

Implement a navbar and search input in a React app using Redux Toolkit and RTK Query, wired to a recipe mutation and styled with Material UI.

Fetch all recipes with the query and display them in a reusable card component that shows the recipe image and title, handling loading and data states.

Implement a search feature for recipes by setting a query and clearing inputs, and display a loading spinner using a material component to indicate the loading state.

Build a health category dropdown in a React app using plain HTML and CSS, map predefined options, and filter recipes based on the selected health category.

Learn to show recipe details in a modal by wiring a modal component to card clicks, retrieve recipe data with rtk query in React app, and display calories and ingredients.

Define a recipe type and replace any with proper types to enable type-safe React Redux Toolkit code, wiring types across components and handlers, including initial values and event typings.