Each component that is defined in the pages directory of a
Gatsby app will be generated into a separate
static page. Each of these pages is meant to stand on its own. Nevertheless,
there is still a behind-the-scenes root component above all of these pages.
There are cases where’d you like to wrap this root component with some other
component, such as a Redux Provider.

This can be done using the wrapRootElement hook from the Browser API in
the gatsby-browser.js file.

Each page and each component in your Gatsby app will now be downstream from
a Redux provider meaning that they can connect to the Redux store as needed.
You can use this technique for any top-level component that need to be
wrapped around the entire app.

Today I Learned is an open-source project by
Hashrocket
that exists to catalogue the sharing & accumulation of knowledge
as it happens day-to-day. Posts have a 200-word limit, and
posting is open to any Rocketeer as well as selected friends of
Hashrocket. We hope you enjoy learning along with us.