Refactor RTK Query to Use a Normal Redux Toolkit Store

Share this video with your friends

Social Share Links

Send Tweet

In many applications that you'll use RTK Query in you will have a Redux store. This lesson shows you the basic steps it takes to convert from using ApiProvider by configuring your Redux store with an API slice.

Instructor: [0:00] We're still using the ApiProvider here. Let's swap that out for a normal Redux store. [0:06] To do that, we import { configureStore } from '@reduxjs/toolkit' and we import { Provider } from 'react-redux'. With those, we can all go down here and recreate a store variable with configureStore, pass in a reducer, which in this case means we mount a slice at API reducerPath, and at the API reducer.

[0:55] We also add the API middleware by saying getDefaultMiddleware => getDefaultMiddleware() and we concatenate that with api.middleware.

[1:16] Now that we have that store, we can switch out the ApiProvider to normal provider and just pass in the store.