Utilizing the Redux DevTools Extension with Redux v5.0.0

Demonstrate how to integrate and use the Redux DevTools Extension with Redux v5 for better debugging and development experience.

import { createStore } from 'redux';
// Import the root reducer from your reducer file
import rootReducer from './reducers/index';

// Function to configure the Redux Store
function configureStore(initialState) {
  // Use Redux DevTools Extension if it's installed in the browser
  const reduxDevTools =
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();

  // Create the store with the root reducer and the initial state
  // Also integrate it with DevTools.
  const store = createStore(rootReducer, initialState, reduxDevTools);

  return store;
}

// Create the store
const store = configureStore();

// Export the store
export default store;

This piece of code demonstrates how to configure a Redux store and integrate it with the Redux DevTools Extension. It first imports the `createStore` function from redux, as well as the root reducer from the reducers directory. It defines a `configureStore` function that optionally takes an initial state. The function checks if the Redux DevTools Extension is present in the browser and enables it. Afterward, it creates the Redux store using the root reducer and applies the Redux DevTools Extension if available. Finally, it exports the configured store for use across the application.