Blog>
Snippets

Refactoring createStore to Modern Syntax

Transform a legacy Redux `createStore` implementation to the updated redux toolkit's `configureStore` method, showcasing the new approach in Redux v5.0.0.
import { createStore, combineReducers } from 'redux';
import todosReducer from './reducers/todosReducer';
import visibilityFilterReducer from './reducers/visibilityFilterReducer';

// Legacy code using createStore
c// Create a root reducer combining multiple reducers
const rootReducer = combineReducers({
  todos: todosReducer,
  visibilityFilter: visibilityFilterReducer
});

// Configure the store with root reducer and devtools extension
const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
This is the original setup using `createStore` from Redux prior to v5.0.0, including rootReducer combining multiple reducers and the manual setup for Redux DevTools.
import { configureStore } from '@reduxjs/toolkit';
import todosReducer from './reducers/todosReducer';
import visibilityFilterReducer from './reducers/visibilityFilterReducer';

// Modern code using configureStore
// Create a root reducer object
const rootReducer = {
  todos: todosReducer,
  visibilityFilter: visibilityFilterReducer
};

// Configure the store using the configureStore API
c// It automatically sets up DevTools
const store = configureStore({
  reducer: rootReducer,
  devTools: process.env.NODE_ENV !== 'production',
});
This is the updated code using `configureStore` from Redux Toolkit. It automatically configures the Redux DevTools and simplifies the initial setup.