part 12

Author: rwieruch

package-lock.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
+    "react-redux": "^5.0.5",
     "react-scripts": "1.0.10",
     "redux": "^3.7.2",
     "redux-logger": "^3.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,7 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { doArchiveStory } from '../actions/archive';
+import { getReadableStories } from '../selectors/story';
 import './Stories.css';
 
 import Story from './Story';
@@ -51,4 +54,15 @@ const StoriesHeader = ({ columns }) =>
     )}
   </div>
 
-export default Stories;
+const mapStateToProps = state => ({
+  stories: getReadableStories(state),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onArchive: id => dispatch(doArchiveStory(id)),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Stories);

src/components/Stories.js

@@ -1,23 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
 import App from './components/App';
 import store from './store';
-import { getReadableStories } from './selectors/story';
-import { doArchiveStory } from './actions/archive';
 import './index.css';
 import registerServiceWorker from './registerServiceWorker';
 
-function render() {
-  ReactDOM.render(
-    <App
-      stories={getReadableStories(store.getState())}
-      onArchive={id => store.dispatch(doArchiveStory(id))}
-    />,
-    document.getElementById('root')
-  );
-}
-
-store.subscribe(render);
-render();
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+);
 
 registerServiceWorker();