CODEWITHSUNDEEP
reactjsredux
Benjamin Li
Benjamin Li

Reputation: 1697

In React with Redux, what does this snippet mean?

Joined a new team, and found below snippet:

const bookListContainer = (location, cb) => {
    require.ensure([], require => {
        cb(null, require('somepath').default)
    }, 'bookList')
}

<Route path="/" component={App}>
    <Route path="home" component={HomeComponent} />
    <Route path="bookList/:bookId" getComponent={bookListContainer} />
</Route>

what is the difference between component and getComponent? And for bookListContainer, what does it exact do? cannot understand require.ensure()

thanks

Upvotes: 0

Views: 76

Answers (2)

patrick
patrick

Reputation: 10273

This is a way to asynchronously load routes by splitting them into separate bundles.

getComponent will fire when the route is matched and consequently require what is necessary for that bundle bookList

This is a way to assist reducing the initial load time of your application.

Upvotes: 1

Jos&#233; Quinto Zamora
Jos&#233; Quinto Zamora

Reputation: 2128

I recommend you to read code splitting: https://webpack.github.io/docs/code-splitting.html

You will learn some important concepts there to understand this code.

Regards!

Upvotes: 2

Related Questions