part 15

Author: rwieruch

package.json

@@ -8,7 +8,9 @@
   "dependencies": {
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
-    "redux": "^3.6.0"
+    "react-redux": "^5.0.5",
+    "redux": "^3.6.0",
+    "redux-logger": "^3.0.6"
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/archive.js

@@ -0,0 +1,10 @@
+import { STORY_ARCHIVE } from '../constants/actionTypes';
+
+const doArchiveStory = id => ({
+  type: STORY_ARCHIVE,
+  id,
+});
+
+export {
+  doArchiveStory,
+};

src/actions/index.js

@@ -7,10 +7,7 @@ class App extends Component {
   render() {
     return (
       <div className="app">
-        <Stories
-          stories={this.props.stories}
-          onArchive={this.props.onArchive}
-        />
+        <Stories />
       </div>
     );
   }

src/components/App.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { getReadableStories } from '../selectors/story';
 import './Stories.css';
 
 import Story from './Story';
@@ -27,10 +29,7 @@ const COLUMNS = {
 
 class Stories extends Component {
   render() {
-    const {
-      stories,
-      onArchive,
-    } = this.props;
+    const { stories } = this.props;
 
     return (
       <div className="stories">
@@ -41,7 +40,6 @@ class Stories extends Component {
             key={story.objectID}
             story={story}
             columns={COLUMNS}
-            onArchive={onArchive}
           />
         )}
       </div>
@@ -61,4 +59,10 @@ const StoriesHeader = ({ columns }) =>
     )}
   </div>
 
-export default Stories;
+const mapStateToProps = state => ({
+  stories: getReadableStories(state),
+});
+
+export default connect(
+  mapStateToProps
+)(Stories);

src/components/Stories.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { doArchiveStory } from '../actions/archive';
 import './Story.css';
 
 import { ButtonInline } from './Buttons';
@@ -44,4 +46,11 @@ class Story extends Component {
   }
 }
 
-export default Story;
+const mapDispatchToProps = dispatch => ({
+  onArchive: id => dispatch(doArchiveStory(id)),
+});
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(Story);

src/components/Story.js

@@ -1,16 +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 { STORY_ARCHIVE } from './constants/actionTypes';
 import registerServiceWorker from './registerServiceWorker';
 import './index.css';
 
 ReactDOM.render(
-  <App
-    stories={store.getState().storyState}
-    onArchive={id => store.dispatch({ type: STORY_ARCHIVE, id })}
-  />,
+  <Provider store={store}>
+    <App />
+  </Provider>,
   document.getElementById('root')
 );
+
 registerServiceWorker();

src/index.js

@@ -2,6 +2,9 @@ import { STORY_ARCHIVE } from '../constants/actionTypes';
 
 const INITIAL_STATE = [];
 
+const applyArchiveStory = (state, action) =>
+  [ ...state, action.id ];
+
 function archiveReducer(state = INITIAL_STATE, action) {
   switch(action.type) {
     case STORY_ARCHIVE : {
@@ -11,8 +14,4 @@ function archiveReducer(state = INITIAL_STATE, action) {
   }
 }
 
-function applyArchiveStory(state, action) {
-  return [ ...state, action.id ];
-}
-
 export default archiveReducer;

src/reducers/archive.js

@@ -0,0 +1,9 @@
+const isNotArchived = archivedIds => story =>
+  archivedIds.indexOf(story.objectID) === -1;
+
+const getReadableStories = ({ storyState, archiveState }) =>
+  storyState.filter(isNotArchived(archiveState));
+
+export {
+  getReadableStories,
+};

src/selectors/story.js

@@ -1,8 +1,13 @@
-import { createStore } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
+import { createLogger } from 'redux-logger';
 import rootReducer from '../reducers';
 
+const logger = createLogger();
+
 const store = createStore(
-  rootReducer
+  rootReducer,
+  undefined,
+  applyMiddleware(logger)
 );
 
-export default store;
+export default store;