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 [here](https://github.com/xjamundx/egghead-rtkq).
Overview
Syllabus
- 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
Taught by
Jamund Ferguson
