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.