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

Adopting RTK Query into an Existing Redux Application

This our longest lesson. It covers territory that we've already covered, but in a more advanced way. Here are some of the main points.

1. When you migrate redux state into RTK Query, by mindful that you may have had initial state, which should usually be replaced with an `isLoading` check
2. Like everywhere else we rely on [destructuring asignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring) to give meaningful names to the generic `data` property returned from our query hook.
3. We're also using [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) to deal with  `data` before we receive a server response
4. We're continuing to update our `getServicesForLuckyDog` selector here and pass in additional data, this time for our dogs


redux

https://app.egghead.io/api/v1/lessons/redux-migrate-a-redux-thunk-to-rtk-query/transcript

Adopting RTK Query into an Existing Redux Application

Migrate a Redux Thunk to RTK Query

Social Share Links