ht3

src/ac/index.js

@@ -1,4 +1,4 @@
-import { INCREMENT, DELETE_ARTICLE } from '../constants'
+import { INCREMENT, DELETE_ARTICLE, FILTER_SELECT } from '../constants'
 
 export function increment() {
   return {
@@ -12,3 +12,10 @@ export function deleteArticle(id) {
     payload: { id }
   }
 }
+
+export function filterSelect(select) {
+  return {
+    type: FILTER_SELECT,
+    payload: { select }
+  }
+}

src/components/app.js

@@ -10,7 +10,7 @@ class App extends Component {
       <div>
         <UserForm />
         <Counter />
-        <Filters articles={[]} />
+        <Filters />
         <ArticleList />
       </div>
     )

src/components/article-list.js

@@ -40,5 +40,7 @@ export class ArticleList extends Component {
 const ArticleListWithAccordion = accordionDecorator(ArticleList)
 
 export default connect((state) => ({
-  articles: state.articles
+  articles: state.articles.articlesVisable.length
+    ? state.articles.articlesVisable
+    : state.articles.articlesState
 }))(ArticleListWithAccordion)

src/components/filters/index.js

@@ -8,7 +8,7 @@ class Filters extends Component {
   render() {
     return (
       <div>
-        <SelectFilter articles={this.props.articles} />
+        <SelectFilter />
         <DateRange />
       </div>
     )

src/components/filters/select.js

@@ -1,13 +1,13 @@
 import React, { Component } from 'react'
 import Select from 'react-select'
+import { connect } from 'react-redux'
+import { filterSelect } from '../../ac'
 
 class SelectFilter extends Component {
-  state = {
-    selected: null
+  handleChange = (selected) => {
+    this.props.filterSelect({ selected })
   }
 
-  handleChange = (selected) => this.setState({ selected })
-
   get options() {
     return this.props.articles.map((article) => ({
       label: article.title,
@@ -19,12 +19,20 @@ class SelectFilter extends Component {
     return (
       <Select
         options={this.options}
-        value={this.state.selected}
+        value={this.props.selected}
         onChange={this.handleChange}
         isMulti
       />
     )
   }
 }
 
-export default SelectFilter
+export default connect(
+  (state) => ({
+    articles: state.articles.articlesState,
+    selected: state.articles.articlesFilter.length
+      ? state.articles.articlesFilter
+      : null
+  }),
+  { filterSelect }
+)(SelectFilter)

src/constants/index.js

@@ -1,3 +1,5 @@
 export const INCREMENT = 'INCREMENT'
 
 export const DELETE_ARTICLE = 'DELETE_ARTICLE'
+
+export const FILTER_SELECT = 'FILTER_SELECT'

src/reducer/articles.js

@@ -1,14 +1,50 @@
 import defaultArticles from '../fixtures'
-import { DELETE_ARTICLE } from '../constants'
+import { DELETE_ARTICLE, FILTER_SELECT } from '../constants'
 
-export default (articlesState = defaultArticles, action) => {
+export default (
+  articleObj = {
+    articlesState: defaultArticles,
+    articlesVisable: {},
+    articlesFilter: {}
+  },
+  action
+) => {
   const { type, payload } = action
 
   switch (type) {
-    case DELETE_ARTICLE:
-      return articlesState.filter((article) => article.id !== payload.id)
+    case DELETE_ARTICLE: {
+      let item_article = articleObj.articlesState.filter(
+        (article) => article.id !== payload.id
+      )
+      let item_visable = articleObj.articlesVisable.filter(
+        (article) => article.id !== payload.id
+      )
+      let item_filter = articleObj.articlesFilter.filter(
+        (article) => article.value !== payload.id
+      )
+      articleObj = {
+        ...articleObj,
+        articlesState: item_article,
+        articlesVisable: item_visable,
+        articlesFilter: item_filter
+      }
+      return articleObj
+    }
+
+    case FILTER_SELECT: {
+      let item_id = new Set(payload.select.selected.map((item) => item.value))
+      let item_visable = articleObj.articlesState.filter((article) =>
+        item_id.has(article.id)
+      )
+      articleObj = {
+        ...articleObj,
+        articlesVisable: item_visable,
+        articlesFilter: payload.select.selected
+      }
+      return articleObj
+    }
 
     default:
-      return articlesState
+      return articleObj
   }
 }