add change filter

src/App.js

@@ -26,7 +26,7 @@ class App extends Component {
     this.props.onItemDone(id);
   };
 
-  sortDoneHandler = ( filter ) => {
+/*  sortDoneHandler = ( filter ) => {
     console.log(filter);
     this.props.onItemSortDone( filter );
   };
@@ -39,7 +39,7 @@ class App extends Component {
   sortAllHandler = (filter) => {
     console.log(filter);
     this.props.onItemSortAll(filter)
-  };
+  };*/
 
   render() {
     return (
@@ -52,9 +52,9 @@ class App extends Component {
         />
         <Controls
           userClick={this.itemAddHandler}
-          userClickFilterOne={e => this.sortDoneHandler(VisibilityFilters.SORT_RED)}
-          userClickFilterTwo={e => this.sortUnDoneHandler(VisibilityFilters.SORT_BLACK)}
-          userClickFilterThree={e => this.sortAllHandler(VisibilityFilters.SORT_ALL)}
+          userClickFilterOne={e => this.props.changeFilter(VisibilityFilters.SORT_RED)}
+          userClickFilterTwo={e => this.props.changeFilter(VisibilityFilters.SORT_BLACK)}
+          userClickFilterThree={e => this.props.changeFilter(VisibilityFilters.SORT_ALL)}
         />
         <ol>
           {
@@ -75,8 +75,8 @@ class App extends Component {
 
 export default connect(
   state => ({
-    todoItems: state.items,
-    //todoItems: getFilteredItems({ ...state }) //store
+    //odoItems: state.items,
+    todoItems: getFilteredItems(state) //store
   }),
   dispatch => ({
     onItemAdd: (item) => {
@@ -92,7 +92,7 @@ export default connect(
         type: 'MARK_DONE', id
       })
     },
-    onItemSortDone: ( filter ) => {
+/*    onItemSortDone: ( filter ) => {
       dispatch({
         type: filter
       })
@@ -106,6 +106,11 @@ export default connect(
       dispatch({
         type: filter
       })
+    },*/
+    changeFilter: (filter) => {
+      dispatch({
+        type: 'CHANGE_FILTER', filter
+      })
     }
   })
 )(App);

src/index.js

@@ -5,12 +5,12 @@ import { createStore } from 'redux';
 
 import './index.css';
 import App from './App';
-import myReducers from './store/myReducers'
+import rootReducer from './store/rootReducer'
 /*import reducerFilter from './store/reducerFilter'
 import reducerTodo from './store/reducer'*/
 
 
-const store = createStore(myReducers,
+const store = createStore(rootReducer,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
   );
 

src/store/actions.js

@@ -8,7 +8,7 @@ export const MARK_DONE = 'MARK_DONE';
 export const SORT_BLACKX = 'SORT_BLACKX';
 export const SORT_ALLX = 'SORT_ALLX';*/
 
-export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
+export const CHANGE_FILTERS = 'CHANGE_FILTERS';
 
 /*
  * другие константы

src/store/filter.js

@@ -0,0 +1,19 @@
+import {CHANGE_FILTERS, VisibilityFilters} from './actions';
+
+const initialState = {
+    currentFilter: VisibilityFilters.SORT_ALL
+}
+
+const reducerFilter = (state = initialState, action) => {
+  switch (action.type) {
+    case CHANGE_FILTERS:
+      return {
+        ...state,
+        currentFilter: action.filter
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducerFilter;

src/store/reducer.js → src/store/items.js

@@ -2,7 +2,7 @@ import * as actionTypes from './actions';
 import {VisibilityFilters} from './actions';
 
 const initialState = {
-  items: [],
+  list: [],
 };
 
 const testState = {
@@ -39,10 +39,10 @@ const reducerTodo = (state = initialState, action) => {
     case actionTypes.ADD:
       return {
         ...state,
-        items: state.items.concat([
+        list: state.list.concat([
           {
             isDone: false,
-            currentFilter: VisibilityFilters.SORT_BLACK,
+            /*currentFilter: VisibilityFilters.SORT_BLACK,*/
             name: action.payload.name,
             id: action.payload.id
           }
@@ -51,7 +51,7 @@ const reducerTodo = (state = initialState, action) => {
 
     case actionTypes.MARK_DONE:
       return {
-        items: state.items.map( element =>
+        list: state.list.map( element =>
           (element.id === action.id )
           ? {...element, isDone: !element.isDone}
           : { ...element})

src/store/rootReducer.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import items from './items';
+import filter from './filter'
+
+export default combineReducers({
+  items,
+  filter
+})

src/store/selects.js

@@ -17,18 +17,16 @@ export const getFilteredItems = (store) => {
     return items.filter(item => item);
   }*/
 
-  const currentFilter = store.currentFilter;// достаем текущий фильтр
-  const items = store.items;
+  const currentFilter = store.filter.currentFilter;// достаем текущий фильтр
+  const items = store.items.list;
 
   // в зависимости от того какой фильтр, производим соответсвующие действия
-  if (currentFilter === VisibilityFilters.SORT_RED) {
+  if (currentFilter === 'SORT_RED') {
     return items.filter(item => items.isDone);
-  } else if (currentFilter === VisibilityFilters.SORT_BLACK) {
+  } else if (currentFilter === 'SORT_BLACK') {
     return items.filter(item => !items.isDone);
-  } else if (currentFilter === VisibilityFilters.SORT_ALL) {
-    return items.filter(item => item);
   } else {
-    return items.filter(item => item);
+    return items;
   }
 
 };