Adopting RTK Query into an Existing Redux Application

RTK Query is a powerful new way to model data fetching and caching in Redux applications. It’s built on top of Redux Toolkit, but hides almost any interaction with reducers, selectors or thunks behind custom hooks generated specifically for your API.

If your redux application relies heavily on data coming in from over the network, there’s a good chance RTK Query is worth adopting. It will allow you to remove significant chunks of code while also giving you new tools for error handling and cache invalidation that will make your users smile. Apply what I teach in this course and you won’t have to think about thunks ever again.

Sample code can be found

.

Course Content

Understand the RTK Query Mental Model Compared to Redux Thunks

Review a Redux App that will be Converted to RTK Query

Define an RTK Query API with createApi

Migrating a fetch() Call from Redux to RTK Query with builder.query()

Pass RTK Query Data into Redux Selectors

Migrate a GET Request with a Dynamic URL to RTK Query with builder.query()

Handle Loading and Error States in RTK Query with isLoading and Error Values

Migrate a POST Request in a Redux App to an RTK Query Mutation

Handle Form Submission States with RTK Query’s isLoading and isSuccess Values

Migrate a Redux Thunk to RTK Query

Transform Cached RTK Query Data before Rendering with useMemo

Transforming RTK Query Data before Caching with transformResponse

Access the RTK Query Cache in a Memoized Selector Using an Endpoint’s select() Method

Migrate a Thunk in a Redux Application to an RTK Query Mutation

Manually Refetch Data After an RTK Query Mutation with unwrap() and refetch()

Invalidate the RTK Query Cache using keepUnusedDataFor

Invalidate RTK Query Cache Entries Automatically using providesTags and invalidateTags

Refetch Data on Focus And Reconnect with RTK Query’s setupListeners

Perform Optimistic Updates in RTK Query by Dispatching the updateQueryData Action

Undo an Optimistic Update in RTK Query with queryFulfilled

Customize Query and Mutation Headers in RTK Query with prepareHeaders

Prefetch Data in RTK Query using an Endpoint’s initiate() Method

Prefetch Data in Response to User Interactivity with RTK Query’s usePrefetch hook

Debug RTK Query Applications with the Redux DevTools Chrome Extension

Delete Unused Redux Code After Migrating to RTK Query