configureStore

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.

Exercise Set up store and Provider

Complete the skeleton. Create store with configureStore; use reducer { cart: cartReducer }. Import cartReducer from './cartSlice'. Add export default store.

Show example solution

import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';

const store = configureStore({
  reducer: {
    cart: cartReducer,
  },
});

export default store;

Test yourself

What does configureStore add automatically?
```
Thunk is ready for async work.
```
- CSS reset
- Tailwind CSS
- redux-thunk middleware
- React Router
Show answer

redux-thunk middleware — configureStore adds redux-thunk automatically.

Provider usage

<____ store={store}><App /></Provider>

Show answer

<Provider store={store}><App /></Provider>

configureStore: match the terms

configureStore

Sets up store
Provider

Wraps app
useSelector

Reads state
useDispatch

Sends action

Next lesson: Summary - Redux Toolkit

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies