How To Implement Code Splitting in Redux Applications?

Last Updated : 27 Jun, 2024

Code splitting in Redux applications refers to the practice of breaking down the application into smaller, manageable chunks that can be loaded on demand. This helps in reducing the initial load time of the application by only loading the necessary parts of the application when needed. Dynamic imports with React.lazy and Suspense are commonly used methods for achieving code splitting in React and Redux applications.

Prerequisites

Approach

Use React.lazy to dynamically import components, enabling them to be split into separate chunks and loaded only when needed.
Wrap the lazy-loaded components with React.Suspense to provide a fallback UI, ensuring a smooth loading experience.
Replace direct component imports in your routing configuration with lazy-loaded components to ensure routes load only when accessed.
Ensure that lazy-loaded components connect to the Redux store seamlessly, maintaining state management consistency across the application.
Leverage Webpack’s code-splitting features to automatically split bundles and improve the performance of dynamic imports.

Steps to Setup Redux application

Step 1: Create a Redux application using following command.

npx create-react-app <-Project-name->

Step 2: Navigate to the Project Directory.

cd <-Project-name->

Step 3: Now, install the redux toolkit and react-redux to run redux functions.

npm install redux react-redux @reduxjs/toolkit

Project Structure

Screenshot-2024-06-12-110836 — Project structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@reduxjs/toolkit": "^2.2.5",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-redux": "^9.1.2",
    "react-scripts": "5.0.1",
    "redux": "^5.0.1",
    "web-vitals": "^2.1.4"
  },

Example: This example code is with code splitting.

JavaScript

// src/store/store.js

import { configureStore } from '@reduxjs/toolkit';
import myFeatureReducer from '../features/myFeature/myFeatureSlice';

const store = configureStore({
  reducer: {
    myFeature: myFeatureReducer,
  },
});

export default store;

JavaScript

// MyFeatureComponent.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './myFeatureSlice';

const MyFeatureComponent = () => {
  const value = useSelector(
    (state) => state.myFeature.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{value}</h1>
      <button onClick={
        () => dispatch(increment())}>
        Increment
      </button>
      <button onClick={
        () => dispatch(decrement())}>
        Decrement
      </button>
    </div>
  );
};

export default MyFeatureComponent;

JavaScript

// myFeatureSlice.js

import { createSlice } from '@reduxjs/toolkit';

export const myFeatureSlice = createSlice({
  name: 'myFeature',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = myFeatureSlice.actions;
export default myFeatureSlice.reducer;

JavaScript

// Mycomponent.js

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h2>
        I am dynamically loaded!
      </h2>
    </div>
  );
};

export default MyComponent;

JavaScript

// App.js

import React, { Suspense, lazy } from 'react';
import { Provider } from 'react-redux';
import store from './store/store';
import MyFeatureComponent from './features/Myfeature/MyFeatureComponent';

const Mycomponent = lazy(
	() => import('./components/Mycomponent'));

function App() {
  return (
    <>
      <Provider store={store}>
        <div className="App">
          <MyFeatureComponent />
          <Suspense fallback={<div>Loading...</div>}>
            <Mycomponent />
          </Suspense>
        </div>
      </Provider>
    </>

  );
}

export default App;