Add Wrap The Root Of A Gatsby App In A Component as a react til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_734 TILs and counting..._
+_735 TILs and counting..._
 
 ---
 
@@ -514,6 +514,7 @@ _734 TILs and counting..._
 - [Use withRouter To Pass Down React-Router History](react/use-withrouter-to-pass-down-react-router-history.md)
 - [Visually Select A React Element For Inspection](react/visually-select-a-react-element-for-inspection.md)
 - [Who Is Your Favorite Child?](react/who-is-your-favorite-child.md)
+- [Wrap The Root Of A Gatsby App In A Component](react/wrap-the-root-of-a-gatsby-app-in-a-component.md)
 
 ### React Native
 

react/wrap-the-root-of-a-gatsby-app-in-a-component.md

@@ -0,0 +1,32 @@
+# Wrap The Root Of A Gatsby App In A Component
+
+Each component that is defined in the `pages` directory of a
+[Gatsby](https://www.gatsbyjs.org/) 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.
+
+```javascript
+// gatsby-browser.js
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import store from './src/store';
+
+export const wrapRootElement = ({ element }) => {
+  return (
+    <Provider store={store}>{element}</Provider>
+  );
+}
+```
+
+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.
+
+[source](https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement)