configureStore
- React course
- Advanced
- Lesson 23/56
- 4 min
Learn to set up the store and wrap with Provider.
configureStore
configureStore is RTK's store setup function. It collapses the classic Redux chain of combineReducers + applyMiddleware + compose into one call.
You pass your slices to the reducer field as an object: { cart: cartReducer, product: productReducer }. RTK auto-applies combineReducers.
The RTK store ships with redux-thunk; no extra middleware is needed for async. DevTools are auto-enabled.
Wrapping with Provider
To connect the store to the app you use the Provider component. You wrap the whole app with <Provider store={store}><App /></Provider>.
Now every descendant component can reach the store with useSelector and useDispatch. Provider works on React context.
The store is created once; it is not recreated on every render. That is why it is defined at module scope inside main.jsx.
Practice Set up store and Provider
Complete the skeleton. Create store with configureStore; use reducer { cart: cartReducer }. Import cartReducer from './cartSlice'. Add export default store.
Starter code
import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';
// Define store hereSample solution
import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';
const store = configureStore({
reducer: {
cart: cartReducer,
},
});
export default store;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does configureStore add automatically?
Thunk is ready for async work.- CSS reset
- Tailwind CSS
- redux-thunk middleware Correct answer
- React Router
Explanation: configureStore adds redux-thunk automatically.
2 Provider usage
<____ store={store}><App /></Provider><Provider store={store}><App /></Provider>Explanation: Provider connects the store to the app.
3 configureStore: match the terms
| Term | Meaning |
|---|---|
configureStore |
Sets up store |
Provider |
Wraps app |
useSelector |
Reads state |
useDispatch |
Sends action |