add actionCreators, middleware, thunk

package.json

@@ -7,7 +7,8 @@
     "react-dom": "^16.4.1",
     "react-redux": "^5.0.7",
     "react-scripts": "1.1.4",
-    "redux": "^4.0.0"
+    "redux": "^4.0.0",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -6,7 +6,8 @@ import Input from './components/Input'
 import Output from './components/Output'
 import {getFilteredItems} from './store/selects'
 import './index.css'
-import {VisibilityFilters} from "./store/actions";
+import {VisibilityFilters} from './store/actions';
+import * as actionCreators from './store/actions';
 
 class App extends Component {
   constructor(props) {
@@ -65,22 +66,13 @@ export default connect(
   }),
   mapDispatchToProps => ({
     onItemAdd: (item) => {
-      mapDispatchToProps({
-        type: 'ADD', payload: {
-          id: Date.now(),
-          name: item
-        }
-      })
+      mapDispatchToProps(actionCreators.add({id: Date.now(), name: item}));
     },
     onItemDone: (id) => {
-      mapDispatchToProps({
-        type: 'MARK_DONE', id
-      })
+      mapDispatchToProps(actionCreators.markDone(id));
     },
     changeFilter: (filter) => {
-      mapDispatchToProps({
-        type: 'CHANGE_FILTER', filter
-      })
+      mapDispatchToProps(actionCreators.changeFilter(filter))
     }
   })
 )(App);

src/index.js

@@ -1,15 +1,27 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {Provider} from 'react-redux';
-import {createStore} from 'redux';
+import {createStore, applyMiddleware} from 'redux';
+import thunk from 'redux-thunk'
 
 import './index.css';
 import App from './App';
 import rootReducer from './store/rootReducer'
 
-const store = createStore(rootReducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
+const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
+
+const logger = store => {
+  return next => {
+    return action => {
+      console.log('[Middleware] Dispatching', action);
+      const result = next(action);
+      console.log('[Middleware] next state', store.getState());
+      return result;
+    }
+  }
+};
+
+const store = createStore(rootReducer, devTools, applyMiddleware(logger, thunk));
 
 store.subscribe(() => {
   console.log('[subscribe]', store.getState());

src/store/actions.js

@@ -13,21 +13,25 @@ export const VisibilityFilters = {
 
 //генераторы действий, action creators
 
-export const add = () => {
+export const add = ({id, name}) => {
   return {
-    type: ADD
+    type: ADD,
+    id: id,
+    name: name
   }
 };
 
-export const markDone = () => {
+export const markDone = (getId) => {
   return {
-    type: MARK_DONE
+    type: MARK_DONE,
+    id: getId
   }
 };
 
-export const changeFilter = () => {
+export const changeFilter = (filter) => {
   return {
-    type: CHANGE_FILTER
+    type: CHANGE_FILTER,
+    filter: filter
   }
 };
 

src/store/items.js

@@ -14,8 +14,8 @@ const reducerTodo = (state = initialState, action) => {
           {
             isDone: false,
 /*            currentFilter: VisibilityFilters.SORT_BLACK,*/
-            name: action.payload.name,
-            id: action.payload.id
+            name: action.name,
+            id: action.id
           }
         ])
       };