merge

src/App.js

@@ -26,20 +26,18 @@ class App extends Component {
     this.props.onItemDone(id);
   };
 
-  sortDoneHandler = ( filter ) => {
-    console.log("filter: " + filter);
-    this.props.onItemSortDone( filter );
-  };
-
-  sortUnDoneHandler = (filter) => {
-    console.log(filter);
-    this.props.onItemSortUnDone(filter);
-  };
-
-  sortAllHandler = (filter) => {
-    console.log(filter);
-    this.props.onItemSortAll(filter)
-  };
+  /*  sortDoneHandler = ( filter ) => {
+      console.log(filter);
+      this.props.onItemSortDone( filter );
+    };
+    sortUnDoneHandler = (filter) => {
+      console.log(filter);
+      this.props.onItemSortUnDone(filter);
+    };
+    sortAllHandler = (filter) => {
+      console.log(filter);
+      this.props.onItemSortAll(filter)
+    };*/
 
   render() {
     return (
@@ -52,9 +50,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,7 +73,7 @@ class App extends Component {
 
 export default connect(
   state => ({
-    //todoItems: state.items,
+    //odoItems: state.items,
     todoItems: getFilteredItems(state) //store
   }),
   dispatch => ({
@@ -92,19 +90,24 @@ export default connect(
         type: 'MARK_DONE', id
       })
     },
-    onItemSortDone: ( filter ) => {
-      dispatch({
-        type: filter
-      })
-    },
-    onItemSortUnDone: ( filter ) => {
-      dispatch({
-        type: filter
-      })
-    },
-    onItemSortAll: (filter) => {
+    /*    onItemSortDone: ( filter ) => {
+          dispatch({
+            type: filter
+          })
+        },
+        onItemSortUnDone: ( filter ) => {
+          dispatch({
+            type: filter
+          })
+        },
+        onItemSortAll: (filter) => {
+          dispatch({
+            type: filter
+          })
+        },*/
+    changeFilter: (filter) => {
       dispatch({
-        type: filter
+        type: 'CHANGE_FILTER', filter
       })
     }
   })

src/index.js

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

src/store/actions.js

@@ -5,7 +5,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_FILTER = 'CHANGE_FILTER';
 
 //другие константы
 

src/store/filter.js

@@ -0,0 +1,19 @@
+import {CHANGE_FILTER, VisibilityFilters} from './actions';
+
+const initialState = {
+    currentFilter: VisibilityFilters.SORT_ALL
+}
+
+const reducerFilter = (state = initialState, action) => {
+  switch (action.type) {
+    case CHANGE_FILTER:
+      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,7 +39,7 @@ const reducerTodo = (state = initialState, action) => {
     case actionTypes.ADD:
       return {
         ...state,
-        items: state.items.concat([
+        list: state.list.concat([
           {
             isDone: false,
 /*            currentFilter: VisibilityFilters.SORT_BLACK,*/
@@ -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,17 +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;
+  console.log(currentFilter);
 
   // в зависимости от того какой фильтр, производим соответсвующие действия
   if (currentFilter === VisibilityFilters.SORT_RED) {
-    return items.filter(item => items.isDone);
+    return items.filter(item => item.isDone);
   } else if (currentFilter === VisibilityFilters.SORT_BLACK) {
-    return items.filter(item => !items.isDone);
-  } else if (currentFilter === VisibilityFilters.SORT_ALL) {
-    return items.filter(item => item);
+    return items.filter(item => !item.isDone);
   } else {
-    return items.filter(item => item);
+    return items;
   }
 };