Blog>
Snippets

Converting a createStore Initialization to configureStore

Showcase a before-and-after snippet demonstrating the refactoring from Redux's createStore to configureStore for better Redux v5.0.0 compliance.
// Old way using createStore
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

const middlewares = [thunk];
const enhancers = composeWithDevTools(applyMiddleware(...middlewares));
const store = createStore(
  rootReducer,
  enhancers
);
This is the conventional method of initializing a Redux store using createStore along with applyMiddleware, with Redux Thunk as middleware, and integrating Redux DevTools.
// New way using configureStore from Redux Toolkit
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
import thunk from 'redux-thunk';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk)
});
This snippet refactors the previous store initialization to use configureStore from Redux Toolkit, which simplifies the setup by removing the need for composeWithDevTools and manual integration of middlewares.