Author avatar

Solomon Ayoola

Code-Splitting your Redux Application

Solomon Ayoola

  • Dec 18, 2019
  • 8 Min read
  • 670 Views
  • Dec 18, 2019
  • 8 Min read
  • 670 Views
Web Development
React

Introduction

Modern web sites often combine all of their JavaScript into a single, large bundle. When JavaScript is served this way, loading performance suffers. Large amounts of JavaScript can also tie up the main thread, delaying interactivity. This is especially true of devices with less memory and processing power.

An alternative to large bundles is code-splitting, which is where JavaScript is split into smaller chunks. This enables sending the minimal code required to provide value up front, improving page-load times. The rest can be loaded on demand.

In this guide, we will be talking about code-splitting in the context of React, Redux, and React-Redux applications.

This guide assumes some level of familiarity with React, Redux, and React-Redux.

What is Code-Splitting?

Code-splitting is the act of deferring the import of some portion of our JavaScript until it is needed at a later point in time by a user interaction such as button click, scrolling, typing, etc.

Code-splitting helps reduce the amount of JavaScript that is needed to make our app load as quickly as possible, thereby maximizing user engagement and improve page load times.

Code-splitting is a feature supported by bundlers like Webpack, Rollup and Browserify (via factor-bundle), which can create multiple bundles that can be dynamically loaded at runtime.

Code-Splitting in a React Component

The preferred way to introduce code-splitting in a React component is via dynamic import(). The import() function-like form takes the module name as an argument and returns a Promise, which always resolves to the namespace object of the module.

1
import('./Module').then(Module => Module.method())
javascript
1
2
3
4
// SomeComponent.js
const SomeComponent = () => <p>This is a test component</p>

export default SomeComponent
jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// App.js
import React, { Component } from 'react'

class App extends Component {
  handleClick = () => {
    import('./SomeComponent')
      .then(({ SomeComponent }) => {
        // Use SomeComponent
      })
      .catch(err => {
        // Handle failure
      });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
      </div>
    );
  }
}

export default App;
jsx

The example above includes SomeComponent.js as a separate chunk that only loads after the Click Me button has been clicked.

React.lazy method makes it easy to code-split a React application on a component level using dynamic imports.

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

1
const SomeComponent = React.lazy(() => import('./SomeComponent'));
javascript

The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.

1
2
3
4
5
6
7
8
9
10
11
const SomeComponent = React.lazy(() => import('./SomeComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <SomeComponent />
      </Suspense>
    </div>
  );
}
jsx

Suspense fallback props accepts any React element which is being rendered while waiting for the component to load. We can place the Suspense component anywhere above the lazy component. We can even wrap multiple lazy components with a single Suspense component.

1
2
3
4
5
6
7
8
9
10
11
12
13
const SomeComponent = React.lazy(() => import('./SomeComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <SomeComponent />
        <AnotherComponent />
      </Suspense>
    </div>
  );
}
jsx

React.lazy currently only supports default exports.

Route-Based Code-Splitting

Here’s an example of how to setup route-based code-splitting into our app using libraries like React Router with React.lazy.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// App.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Suspense>
  </Router>
);
jsx

Code-Splitting with Redux

From the previous sections, we have been able to demonstrate how we can load our React components dynamically, but we still need to get the right data into our modules as they load.

Redux as a state management library allows us to provide reducer functions at the time we create the store with createStore function but does not give us the ability to to register reducer functions on demand. So how do we achieve that?

It turns out Redux store API exposes a replaceReducer function that replaces the current active root reducer function with a new root reducer function.

1
2
3
4
5
6
7
8
9
10
11
12
// store.js
import { combineReducers, createStore } from "redux"

const initialState = {}
const store = createStore(createReducer(), initialState)

const newRootReducer = combineReducers({
  existingSlice: existingSliceReducer,
  newSlice: newSliceReducer
})

store.replaceReducer(newRootReducer)
javascript

We could go one step further by creating a reusable injectReducer function in addition to the replaceReducer that keeps references to all of the existing slice reducers, and attach that to the store instance.

1
2
3
4
5
6
7
8
9
10
// reducers.js
import { combineReducers } from 'redux'

const createReducer = (asyncReducers) => {
  return combineReducers({
    ...asyncReducers
  })
}

export default createReducer
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// store.js
import { createStore } from "redux"
import createReducer from "./reducers"

const store = createStore(createReducer())

export default function configureStore() {
  // Add a dictionary to keep track of the registered async reducers
  store.asyncReducers = {}

  // Create an inject reducer function
  // This function adds the async reducer, and creates a new combined reducer
  store.injectReducer = (key, asyncReducer) => {
    store.asyncReducers[key] = asyncReducer
    store.replaceReducer(createReducer(store.asyncReducers))
  }

  // Return the modified store
  return store
}

export function getStore() {
  return store
}
javascript

Note: injectReducer is not part of the redux store API.

The usage looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// App.js
import React from "react";
import { getStore } from '../store'

const store = getStore()

const Section = React.lazy(() => import('../containers/Section')
  .then(async module => {
  const todos = await import('../reducers/todos')
    .then(todosModule => todosModule.default)

  store.injectReducer('todos', todos)
  return module
}))

const App = () => (
  <React.Suspense fallback={<div>loading...</div>}>
    <MainSection />
  </React.Suspense>
);

export default App;
jsx

A few Redux libraries that are worth checking out:

The link below points to a working example of a todo application that uses React.lazy, React.Suspense and Redux.

Edit

Conclusion

In this guide, we have learned how code-splitting can help us improve loading time and page performance by loading Javascript on demand until it is needed.

Here are a few resources on Code-Splitting to check out:

2