Model Online / On-Site
Duration
Modules 4 modules

About the Course

In data-intensive React applications with intricate domain logic, predictable state management is essential for maintainability and rendering performance. Modern Redux Toolkit (RTK) eliminates legacy Redux boilerplate, offering a concise, strongly typed, and batteries-included architecture.

This hands-on course covers createSlice, immutable updates powered by Immer, state normalization with createEntityAdapter, memoized selectors with Reselect, reactive side effects, and declarative data fetching and caching with RTK Query.

Target Audience and Prerequisites

  • Frontend developers managing complex client and server state in React applications
  • Engineering teams modernizing legacy Redux/Saga/Thunk codebases to Redux Toolkit and RTK Query
  • Solid foundational knowledge of React (Hooks) and TypeScript / JavaScript is required

Key Takeaways

  • Modern Redux Toolkit: Set up a strongly typed store with configureStore, createSlice, and typed hooks
  • Normalization & Selectors: Eliminate redundant re-renders using createEntityAdapter and memoized createSelector functions
  • Async Workflows & Listeners: Orchestrate complex side effects with createAsyncThunk and createListenerMiddleware
  • RTK Query Data Layer: Automate API fetching, tag-based cache invalidation, and optimistic updates

Curriculum

State Management Architecture and Modern Redux Toolkit (RTK) Core
  • Categorizing application state (Local UI, Global Client, Server Cache, URL State) and deciding when Redux fits
  • Unidirectional data flow, Immutability under the hood with Immer, and debugging with Redux DevTools
  • Configuring a type-safe store with configureStore, createSlice, and typed useAppDispatch / useAppSelector hooks
State Normalization, Memoized Selectors, and Rendering Performance
  • Why deeply nested state trees cause mutation bugs and unnecessary component re-renders
  • Normalizing relational collections into { ids, entities } lookup tables using createEntityAdapter
  • Computing derived state efficiently with Reselect (createSelector) and profiling React render performance
Asynchronous Workflows, Thunks, and Listener Middleware
  • Understanding the Redux middleware pipeline and authoring custom telemetry/logging middlewares
  • Handling async lifecycles (pending, fulfilled, rejected), typed errors, and request cancellation with createAsyncThunk
  • Building reactive, event-driven side-effect workflows using createListenerMiddleware
Declarative Data Fetching with RTK Query and Testing Redux
  • Defining API slices with createApi, fetchBaseQuery, and auto-generated React hooks
  • Automated cache invalidation using providesTags / invalidatesTags and implementing Optimistic Updates
  • Unit and integration testing reducers, selectors, and connected components with Vitest / Jest and React Testing Library

Other Courses in This Category

  • TypeScript for Modern Application Development

    Develop scalable, bug-free TypeScript applications using strict typing, generics, utility types, discriminated unions, and type-safe API layers.

    Web Development – Frontend Corporate
    Live Course
    4 modules
    View
  • Modern Web Development with React and Next.js

    Build high-performance web applications with React 19, Server and Client Components, Next.js App Router, SSR/SSG/ISR strategies, Server Actions, and caching.

    Web Development – Frontend Corporate
    Live Course
    4 modules
    View
  • Modern Single Page Application (SPA) Architecture and Libraries

    Master modern SPA architecture, client-side routing, server-state management with TanStack Query, Vite tooling, and bundle optimization techniques.

    Web Development – Frontend Corporate
    Live Course
    4 modules
    View
  • Enterprise Frontend Development with Angular

    Build enterprise Angular applications using Standalone Components, Angular Signals, RxJS, Reactive Forms, modular architecture, and OnPush optimization.

    Web Development – Frontend Corporate
    Live Course
    4 modules
    View
  • Micro Frontend and Monorepo Architecture

    Scale large frontend organizations using Module Federation, Nx and Turborepo monorepos, shared design systems, and independent CI/CD deployments.

    Web Development – Frontend Corporate
    Live Course
    4 modules
    View

Get in touch