The Redux Official Course Tutorial Code Along For All Levels

Build a movie list app from scratch using the classic redux approach with a local store, initial three movies, and actions to like, add to basket, or remove.

Build a classic Redux store from scratch in a Next.js React project, using TypeScript and eslint, and explore terminal setup, project structure, and dev workflow.

Learn to set up a redux store and reducer in a Next.js project, defining initial state for movies and basket, handling add, like, and add-to-basket actions with immutability.

Set up a Redux store and reducer, place it beside public assets, and connect to a Next.js page using useSelector, useDispatch, and local state to manage a movie title input.

Learn to use dispatch in a Redux app to add movies with an add_movie action, and wrap the app with a provider.

Learn how to set up the Redux provider by importing provider from react-redux and the store, wrap the app with the provider, and restart the dev server to apply changes.

Learn to use useSelector for rendering and managing movie state from a centralized redux store, dispatch add movie actions, and display updates for my movies, basket, and liked movies.

Master redux state management by building basket and liked movies features with a selector to access state.basket and state.likedMovies, and rendering counts and item lists.

Demonstrates using selectors and dispatch to manage basket and liked movies, wiring add-to-basket and add-to-liked-movies actions to each movie in a classic redux store.

Reconfigure a Redux store to support an extensible movie schema with title, in basket, and liked properties, adding default movies to improve state management and selectors.

Learn to extend Redux properties as objects for filtering and truth detection by adding movies with title, basket and liked flags, and toggling liked status using includes and filter.

Fix the basket functionality by switching to basket state and handling add and remove actions through the Redux reducer, while reflecting status in the UI.

Implement an improved ternary toggle for liking in redux by updating the reducer and movie objects based on the action payload, switching between like and dislike buttons.

Learn to implement a Redux basket toggle by syncing in-basket status for movies, using add to basket and remove from basket actions for scalable e-commerce store apps.

Migrate a Redux store to TypeScript by defining typed movie, state, and actions, using a union for add movie, add to basket, and add to liked movies.

Learn how TypeScript updates improve Redux code by typing state slices like movies, basket (string array), and likes (boolean), fixing errors with useSelector and dispatch.

Install and integrate Material UI core and icons, build movie cards with card content and actions, and style for a responsive, centered React UI.

Refine styling for the Redux movie store app, enhance the basket and cards with favorite icons and actions using css and Material UI, and migrate code toward centralized state management.

Upgrade the Redux store from createStore to configureStore using Redux Toolkit, introducing createSlice and slices to streamline reducers, middleware, and async logic in a React Redux project.

Create a movie slice with Redux Toolkit to replace a monolithic reducer, defining initial state and reducers for add movie, add to basket, and like movie using TypeScript interfaces.

Learn how to migrate from classic Redux to Redux Toolkit by exporting slice actions, using store-based dispatch, and defining a root state to manage movies, basket, and liked movies.

Reverse engineer the official Redux template to build a Redux Toolkit counter with createSlice and the async status pattern, using React-Redux and devtools.

Learn to organize Redux state by creating a counter slice, exporting actions like increment, configuring a Redux store, and wiring the provider in a React app using Redux Toolkit.

Wire a Redux-backed counter into the app by importing the counter component and increment action, managing local state with useState, and preparing the onClick to dispatch the increment.

Explore how to implement a Redux counter using useSelector and useDispatch, wiring a counter slice, selecting current state, and preparing the button to dispatch an increment action.

Explore how to wire up a dispatch in a Redux RTK counter, dispatching an increment action on click and troubleshooting state updates to achieve a working increment.

Learn to add a decrement action to a Redux slice, destructure it from actions, and connect a minus button to subtract one from state.number.

Explore how action payloads drive Redux updates, toggle between local state and the global store, and implement increment by amount with a dedicated reducer and input handling.

Learn to fetch data with Redux using create async thunk and a mock API, handling promises, setTimeout, and pending and fulfilled cases with extra reducers to manage loading.

Explore how Redux DevTools visualizes async actions, showing pending and fulfilled states, and use step-through actions, trace, and state inspection to debug a counter with fetch count.

Explore the bonus Redux Toolkit solution for proper async request handling by leveraging a fetch status selector to show loading during pending states and display results accurately.

Review how to build a real-time Redux media app with posts, notifications, normalization, and refactoring best practices for scalable, extensible front-end code.

Download the official Redux starter kit, clone it from GitHub, set up the Redux store and routing, and run the Redux Essentials example to explore mocks and API calls.

Create a posts slice with Redux toolkit and configure the store to hold posts with id, title, and content, then display the list on screen.

Learn to read posts from a Redux store using useSelector, map over posts to render a posts list with excerpts, and wire routing to display the posts in app.js.

Build an add post form as a React component with localized state for title and content. Connect the form to the Redux store to add new posts when saving.

Learn to build a Redux Toolkit feature to save posts by adding a post added reducer, dispatching with useDispatch and nanoid IDs, and managing form state for title and content.

Learn to add dynamic routing with React and Redux by creating a single post page that reads the post ID from the URL and selects the post from state.

Explore editing posts with redux by building an edit post form, adding a post updated reducer, routing with a dynamic post id, and using selectors to read and save changes.

Explore how to customize action payloads with the prepare callback in Redux Toolkit, generating a unique id and assembling title and content in the post slice for post added action.

Add a users slice to redux toolkit, wire it to the store, and update the add post form to select an author and pass the user id to posts.

Add a post date timestamp to redux posts and display a time ago label using date-fns, enabling recency sorting in feeds and post pages.

Sort posts by date using a custom comparator to display newest to oldest. Convert dates to ISO strings with date-fns and render ordered posts.

Learn to build emoji reaction buttons for posts using Redux, define reaction state, create action payloads with prepare, dispatch reactions, and reflect changes in post list and single post pages.

Advance Redux practices by implementing async logic with thunk, fetching posts from a mock in-memory api, and modeling loading states. Define reusable selectors like selectAllPosts and selectPostByID.

Learn how to fetch posts with createAsyncThunk in Redux, manage idle, loading, fulfilled, and failed states, and auto-fetch posts using useEffect and a post status selector.

Master extra reducers and builder to handle pending, fulfilled, and rejected states when fetching posts, showing a spinner and updating the post list with error handling.

Fetch real users via an extra reducer in the users slice using a create async thunk and API client, replace state with the fulfilled payload, and dispatch on startup.

Learn to send new post data to an API using Redux Toolkit's create async thunk, manage loading with extra reducers, and update the post slice on success.

Learn to build Redux apps with async thunks for fetching and posting data, manage loading, success, and failure states, and implement user and post routes with React Router.

Build a Redux Toolkit notifications slice to fetch and sort notifications by date using createAsyncThunk, from a fake API, and export the reducer and selector.

Create a Redux notifications list by mapping notifications to users, parsing ISO dates, and formatting time-ago messages with date-fns, while wiring fetch calls and a notifications route.

Learn to manage unread notifications with Redux by updating the notifications slice, dispatching read actions, and rendering a badge on the notifications tab using use layout effect and dispatch.

Use useSelector to select all notifications, filter unread items, and display a dynamic badge with the unread count linked to the notifications page.

Profile and optimize redux rendering using the React profiler, then memoize selectors with reselect to avoid unnecessary rerenders by filtering posts by user.

Explore memoization with React.memo to prevent unnecessary re-renders in a post list and post excerpts, learn how props changes affect rendering, and leverage redux toolkit's entity adapters for id-based updates.

Understand normalized state, storing data as an IDs-entities lookup for fast access. Use Redux Toolkit's createEntityAdapter to generate reducers and selectors with upsert many and add one.

Optimize redux rendering with createEntityAdapter by updating the post list to use ordered post IDs and post entities, wiring select post by id.

Master normalizing data with redux toolkit's entity adapter, converting arrays to a normalized state, using set all, upsert, and get selectors to efficiently access users and notifications.

Explore Redux Toolkit Query for caching and fetching data with an API slice, endpoints, and auto generated hooks, replacing manual data fetching with cached requests.

Learn to fetch and cache posts with RTK Query in Redux, add an individual post endpoint, and manage loading states with a spinner and cache keys.

Mutate server state with redux toolkit query by adding posts via builder.mutation. Learn to refetch and use semi-transparency during loading to refresh the cache.

Auto-refresh post lists using tag types and invalidates tags to keep cache in sync with the server. This Redux Toolkit approach abstracts data fetching and caching to improve UX.

Learn how to edit posts with an RTK Query edit post mutation, manage cache with tag invalidation, and share post data via get post query and cache keys.

Configure the API slice with providesTags and invalidatesTags for posts and IDs to ensure editing a post updates both the detail view and the post list via ID-specific tags.

Create a get users endpoint with RTK Query in the API slice, replace async thunks, and establish selectors for all users and a user by ID.

Explore how to use injected endpoints with RTK Query to extend a single API slice, enabling lazy loading and code splitting for on-demand data loading.

Learn to memoize the posts for a specific user using RTK Query by selecting user data by id, creating a memoized selector, and filtering posts in a useMemo.

Demonstrate optimistic updates in RTK Query by adding an add reaction mutation and updating the post cache with draft via on query started for instant, persisted feedback.

learn how to implement streaming notifications with RTK Query by fetching an initial list and opening a WebSocket to receive real-time updates, updating the cache as messages arrive.

Learn how to integrate WebSocket updates with a Redux notifications slice, implement a query cache, and track read and unread status using metadata and selectors for a responsive nav bar.

Switch from the notifications slice to the useGetNotifications query, use notifications metadata, and read from the query cache to optimize Redux Toolkit data flow and UI.