file.diff

diff --git a/src/amo/components/AddonDetail.js b/src/amo/components/AddonDetail.js
index 18f0ef9..8ef43ba 100644
--- a/src/amo/components/AddonDetail.js
+++ b/src/amo/components/AddonDetail.js
@@ -1,7 +1,12 @@
 import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { asyncConnect } from 'redux-async-connect';
 
 import translate from 'core/i18n/translate';
+import { fetchAddon } from 'core/api';
+import { loadEntities } from 'core/actions';
 
+import log from 'core/logger';
 import AddonMeta from 'amo/components/AddonMeta';
 import InstallButton from 'disco/components/InstallButton';
 import LikeButton from 'amo/components/LikeButton';
@@ -14,10 +19,14 @@ import 'amo/css/AddonDetail.scss';
 export class AddonDetail extends React.Component {
   static propTypes = {
     i18n: PropTypes.object,
+    addon: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      slug: PropTypes.string.isRequired,
+    }),
   }
 
   render() {
-    const { i18n } = this.props;
+    const { i18n, addon } = this.props;
 
     return (
       <div className="AddonDetail">
@@ -28,7 +37,7 @@ export class AddonDetail extends React.Component {
             <LikeButton />
           </div>
           <div className="title">
-            <h1>Placeholder Add-on Title
+            <h1>{addon.name}
               <span className="author">by <a href="#">AwesomeAddons</a></span></h1>
             <InstallButton slug="placeholder" />
           </div>
@@ -71,4 +80,39 @@ export class AddonDetail extends React.Component {
   }
 }
 
-export default translate({ withRef: true })(AddonDetail);
+function mapStateToProps(state, ownProps) {
+  const { slug } = ownProps.params;
+  log.info(`mapping state to props; slug=${slug}`);
+  return {
+    addon: state.addons[slug],
+    slug,
+  };
+}
+
+export function findAddon(state, slug) {
+  return state.addons[slug];
+}
+
+function loadAddonIfNeeded({
+  store: { getState, dispatch },
+  params: { slug },
+}) {
+  throw new Error('loadAddonIfNeeded: YES');
+  const state = getState();
+  const addon = findAddon(state, slug);
+  if (addon) {
+    log.info(`Found addon ${addon.id} in state`);
+    return Promise.resolve(addon);
+  }
+  log.info(`Fetching addon ${slug} from API`);
+  return fetchAddon({ slug, api: state.api })
+    .then(({ entities }) => dispatch(loadEntities(entities)));
+}
+
+let wrappedAddon = translate({ withRef: true });
+wrappedAddon = wrappedAddon(asyncConnect([{
+  deferred: true,
+  promise: loadAddonIfNeeded,
+}])(connect(mapStateToProps)(AddonDetail)));
+
+export default wrappedAddon;
diff --git a/src/amo/containers/DetailPage.js b/src/amo/containers/DetailPage.js
index 239c349..1728602 100644
--- a/src/amo/containers/DetailPage.js
+++ b/src/amo/containers/DetailPage.js
@@ -6,7 +6,7 @@ export default class DetailPage extends React.Component {
   render() {
     return (
       <div>
-        <AddonDetail />
+        <AddonDetail {...this.props} />
       </div>
     );
   }
diff --git a/tests/client/amo/containers/TestDetail.js b/tests/client/amo/containers/TestDetail.js
index 837b931..8a7b295 100644
--- a/tests/client/amo/containers/TestDetail.js
+++ b/tests/client/amo/containers/TestDetail.js
@@ -4,7 +4,9 @@ import {
   findRenderedComponentWithType,
   renderIntoDocument,
 } from 'react-addons-test-utils';
+import { Provider } from 'react-redux';
 
+import createStore from 'amo/store';
 import { getFakeI18nInst } from 'tests/client/helpers';
 import DetailPage from 'amo/containers/DetailPage';
 import I18nProvider from 'core/i18n/Provider';
@@ -12,10 +14,13 @@ import translate from 'core/i18n/translate';
 
 function renderDetailPage({ ...props }) {
   const MyDetailPage = translate({ withRef: true })(DetailPage);
+  const store = createStore();
 
   return findRenderedComponentWithType(renderIntoDocument(
     <I18nProvider i18n={getFakeI18nInst()}>
-      <MyDetailPage {...props} />
+      <Provider store={store}>
+        <MyDetailPage {...props} />
+      </Provider>
     </I18nProvider>
   ), MyDetailPage).getWrappedInstance();
 }
@@ -23,7 +28,7 @@ function renderDetailPage({ ...props }) {
 
 describe('DetailPage', () => {
   it('renders a heading', () => {
-    const root = renderDetailPage();
+    const root = renderDetailPage({ params: { slug: 'some-addon' }});
     const rootNode = findDOMNode(root);
     assert.include(rootNode.querySelector('h1').textContent, 'Placeholder Add-on');
   });