Redux & Redux Toolkit
/Beginner
configureStore()
Definition
An RTK function that wraps `createStore` to provide simplified configuration options and good defaults. It automatically adds the thunk middleware and sets up the Redux DevTools Extension.
Explain Like I'm New
The magic function that sets up your entire Redux app. In the old days, setting up the store, devtools, and middleware took 20 lines of confusing code. `configureStore()` does it all automatically in 3 lines.
Real World Example
Creating the `store.js` file at the very root of your project, passing in all your feature slices, and exporting the final store.
Common Use Cases
- •Store initialization
Interactive Example
import { configureStore } from '@reduxjs/toolkit'; import userReducer from '../features/user/userSlice'; import cartReducer from '../features/cart/cartSlice'; // RTK handles combineReducers, Thunk middleware, and DevTools automatically! export const store = configureStore({ reducer: { user: userReducer, cart: cartReducer, }, }); // (Optional but highly recommended) Export types for TypeScript // export type RootState = ReturnType<typeof store.getState>; // export type AppDispatch = typeof store.dispatch;
Interview Questions
basic
- Does `configureStore` automatically enable the Redux DevTools browser extension?
intermediate
- How does `configureStore` handle multiple reducers?