Blog>
Snippets

Refactoring to configureStore from createStore

Provide an example of how to refactor an existing Redux store setup, replacing createStore with configureStore, including middleware integration.
import { configureStore } from '@reduxjs/toolkit';

// Assume we have an existing rootReducer and some customMiddleware

// Before: using createStore
// import { createStore, applyMiddleware } from 'redux';
// const store = createStore(
//     rootReducer,
//     applyMiddleware(...middlewares)
// );

// After: refactoring to configureStore
const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(customMiddleware),
    devTools: process.env.NODE_ENV !== 'production'
});

export default store;
This code example shows how to refactor from createStore to configureStore in Redux. It imports configureStore from Redux Toolkit, sets up rootReducer and customMiddleware. Then, it creates the store with configureStore, integrating default middleware plus any custom middleware, while conditionally adding Redux DevTools only in non-production environments.