part 11

Author: rwieruch

package-lock.json

@@ -27,6 +27,7 @@
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
     "mobx": "^3.2.2",
+    "mobx-react": "^4.2.2",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.6",

package.json

@@ -3,12 +3,9 @@ import './App.css';
 
 import Stories from './Stories';
 
-const App = ({ stories, onArchive }) =>
+const App = () =>
   <div className="app">
-    <Stories
-      stories={stories}
-      onArchive={onArchive}
-    />
+    <Stories />
   </div>
 
 export default App;

src/components/App.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { inject, observer } from 'mobx-react';
 import './Stories.css';
 import Story from './Story';
 
@@ -24,16 +25,16 @@ const COLUMNS = {
   },
 };
 
-const Stories = ({ stories, onArchive }) =>
+const Stories = ({ storyStore, archiveStore }) =>
   <div className="stories">
     <StoriesHeader columns={COLUMNS} />
 
-    {(stories || []).map(story =>
+    {(storyStore.readableStories || []).map(story =>
       <Story
         key={story.objectID}
         story={story}
         columns={COLUMNS}
-        onArchive={onArchive}
+        onArchive={archiveStore.archiveStory}
       />
     )}
   </div>
@@ -50,4 +51,4 @@ const StoriesHeader = ({ columns }) =>
     )}
   </div>
 
-export default Stories;
+export default inject('storyStore', 'archiveStore')(observer(Stories));

src/components/Stories.js

@@ -1,21 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { autorun } from 'mobx';
+import { Provider } from 'mobx-react';
 import './index.css';
 import App from './components/App';
 import store from './stores';
 import registerServiceWorker from './registerServiceWorker';
 
-function render() {
-  ReactDOM.render(
-    <App
-      stories={store.storyStore.readableStories}
-      onArchive={(objectID) => store.archiveStore.archiveStory(objectID)}
-    />,
-    document.getElementById('root')
-  );
-}
-
-autorun(render);
+ReactDOM.render(
+  <Provider { ...store }>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+);
 
 registerServiceWorker();