add simple selector

package.json

@@ -11,7 +11,8 @@
     "react-redux": "^5.0.7",
     "react-scripts": "2.0.4",
     "react-select": "^2.1.0",
-    "redux": "^4.0.1"
+    "redux": "^4.0.1",
+    "reselect": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/article-list.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Article from './article'
 import accordionDecorator from '../decorators/accordion'
+import { filtratedArticlesSelector } from '../selectors'
 
 export class ArticleList extends Component {
   static propTypes = {
@@ -15,6 +16,7 @@ export class ArticleList extends Component {
   }
 
   render() {
+    console.log('---', 'rendering article list')
     return <ul>{this.items}</ul>
   }
 
@@ -38,20 +40,8 @@ export class ArticleList extends Component {
 }
 
 export default connect((state) => {
-  const {
-    selected,
-    dateRange: { from, to }
-  } = state.filters
-
-  const filtratedArticles = state.articles.filter((article) => {
-    const published = Date.parse(article.date)
-    return (
-      (!selected.length ||
-        selected.find((selected) => selected.value === article.id)) &&
-      (!from || !to || (published > from && published < to))
-    )
-  })
+  console.log('---', 'article list connect')
   return {
-    articles: filtratedArticles
+    articles: filtratedArticlesSelector(state)
   }
 })(accordionDecorator(ArticleList))

src/selectors/index.js

@@ -0,0 +1,24 @@
+import { createSelector } from 'reselect'
+
+export const selectionSelector = (state) => state.filters.selected
+export const dateRangeSelector = (state) => state.filters.dateRange
+export const articleListSelector = (state) => state.articles
+
+export const filtratedArticlesSelector = createSelector(
+  selectionSelector,
+  dateRangeSelector,
+  articleListSelector,
+  (selected, dateRange, articles) => {
+    console.log('---', 'article list selector')
+    const { from, to } = dateRange
+
+    return articles.filter((article) => {
+      const published = Date.parse(article.date)
+      return (
+        (!selected.length ||
+          selected.find((selected) => selected.value === article.id)) &&
+        (!from || !to || (published > from && published < to))
+      )
+    })
+  }
+)