Organizing State with Redux Toolkit's configureStore

Demonstrate replacing a legacy Redux store configuration with the configureStore function from Redux Toolkit for better defaults and middleware support.

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

// Legacy store creation using Redux createStore
// import { createStore, applyMiddleware } from 'redux';
// const store = createStore(
//   rootReducer,
//   applyMiddleware(thunk, logger)
// );

// New store creation using Redux Toolkit's configureStore
const store = configureStore({
  reducer: rootReducer,
  // middleware can be customized, but configureStore adds some good defaults
  // middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(myCustomMiddleware),
});

export default store;

This piece of code replaces the legacy Redux createStore method with the configureStore method from Redux Toolkit. It imports the configureStore function and the root reducer, then creates a store object that combines the reducers. The middleware parameter is optional and can be customized if needed, but configureStore automatically includes a set of recommended middlewares such as Redux Thunk.