Use redux-observable

.editorconfig

+[*]
+indent_style = space
+indent_size = 2

.eslintrc.js

@@ -7,7 +7,8 @@ module.exports = {
     ],
     "quotes": [
       2,
-      "single"
+      "single",
+      { "allowTemplateLiterals": true }
     ],
     "linebreak-style": [
       2,
@@ -19,7 +20,7 @@ module.exports = {
     ],
     //'no-console': 'off',
     "react/jsx-uses-vars": ["error"],
-    "space-infix-ops": ["error", {"int32Hint": true}]
+    "space-infix-ops": ["error", {"int32Hint": true}],
   },
   "env": {
     "es6": true,

.gitignore

 node_modules
+*.swp

package.json

@@ -44,8 +44,7 @@
     "react-leaflet-fullscreen": "0.0.6",
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",
-    "redux-debounced": "^0.5.0",
-    "redux-thunk": "^2.2.0",
+    "redux-observable": "^0.18.0",
     "superagent": "^3.8.2"
   }
 }

src/actions/index.js

+export const FETCH_RESULTS = 'FETCH_RESULTS';
+export const UPDATE_QUERY = 'UPDATE_QUERY';
+export const UPDATE_DATASETS = 'UPDATE_DATASETS';
+export const UPDATE_RESULTS = 'UPDATE_RESULTS';
+export const CLEAR_RESULTS = 'CLEAR_RESULTS';
+export const START_SPINNER = 'START_SPINNER';
+
 export const updateQuery = (query) => ({
-  type: 'UPDATE_QUERY',
+  type: UPDATE_QUERY,
   query
 });
 
 export const fetchResults = () => ({
-  type: 'FETCH_RESULTS',
-  meta: {
-    debounce: {
-      time: 750
-    }
-  }
+  type: FETCH_RESULTS,
 });
 
 export const updateDatasets = (datasets) => ({
-  type: 'UPDATE_DATASETS',
+  type: UPDATE_DATASETS,
   datasets
 });
 
 export const startSpinner = () => ({
-  type: 'START_SPINNER',
+  type: START_SPINNER,
 });
 
 export const updateResults = (results) => ({
-  type: 'UPDATE_RESULTS',
+  type: UPDATE_RESULTS,
   results
 });
 
 export const clearResults = () => ({
-  type: 'CLEAR_RESULTS',
+  type: CLEAR_RESULTS,
 });

src/epics/index.js

+import 'rxjs';
+import _ from 'lodash';
+import { ajax } from 'rxjs/observable/dom/ajax';
+import { combineEpics } from 'redux-observable';
+import { updateResults, FETCH_RESULTS } from '../actions';
+
+const getSuggestionsEpic = (action$, store) => {
+  const searchUrl = 'http://localhost:3000/search';
+
+  return action$.ofType(FETCH_RESULTS)
+    .debounceTime(500)
+    .switchMap(() => {
+      const { query, datasets } = store.getState().search;
+      const dsParams = _.map(datasets, ds => `dataset=${ds}`).join('&');
+
+      const requestUrl = `${searchUrl}?q=${query}&${dsParams}`;
+      return ajax.getJSON(requestUrl)
+        .map(response => updateResults(response));
+    });
+};
+
+const rootEpic = combineEpics(getSuggestionsEpic);
+
+export default rootEpic;

src/index.js

 import React from 'react';
 import { render } from 'react-dom';
 import { createStore, applyMiddleware } from 'redux';
+import { createEpicMiddleware } from 'redux-observable';
 import { Provider } from 'react-redux';
-import thunk from 'redux-thunk';
 import reducer from './reducers';
-// import { logger, crashReporter } from './middleware/crashReporter';
-import hiplaApiMiddleware from './middleware/hiplaApiMiddleware';
-import createDebounce from 'redux-debounced';
+import rootEpic from './epics';
 
 import App from './components/App';
 
 const store = createStore(
   reducer,
   // applyMiddleware() tells createStore() how to handle middleware
-  applyMiddleware(thunk, createDebounce(), hiplaApiMiddleware())
+  applyMiddleware(createEpicMiddleware(rootEpic))
 );
 
 render(

src/middleware/hiplaApiMiddleware.js

-import { startSpinner, updateResults } from '../actions';
-import request from 'superagent';
-
-const hiplaApiMiddleware = () => {
-
-  const searchUrl = 'http://localhost:3000/search';
-
-  const getResults = (store) => {
-    const { query, datasets } = store.getState().search;
-    if (query.length < 3) {
-      return store.dispatch(updateResults([]));
-    }
-
-    console.log('query:', query);
-    console.log('datasets:', datasets);
-    return request(searchUrl)
-      .query({ q: query})
-      .query({ dataset: datasets})
-      .then(response => {
-        if (!response.ok) {
-          return Promise.reject(response);
-        }
-        return store.dispatch(updateResults(response.body));
-      });
-  };
-
-  // A Redux middleware
-  return store => next => action => {
-    switch(action.type) {
-      case 'FETCH_RESULTS':
-        console.log('action: FETCH_RESULTS');
-
-        store.dispatch(startSpinner);
-        next(action);
-        return getResults(store);
-
-      default:
-        return next(action);
-    }
-  };
-};
-
-export default hiplaApiMiddleware;

src/reducers/search.js

+import { UPDATE_QUERY, FETCH_RESULTS, UPDATE_DATASETS, UPDATE_RESULTS, CLEAR_RESULTS } from '../actions';
+
 export const INITIAL_STATE = {
   query: '',
   datasets: ['warsa_karelian_places'],
@@ -5,15 +7,20 @@ export const INITIAL_STATE = {
 };
 
 const search = (state = INITIAL_STATE, action) => {
-  // console.log(state, action);
   switch (action.type) {
-    case 'UPDATE_QUERY':
+    case UPDATE_QUERY:
       return { ...state, query: action.query || '' };
-    case 'UPDATE_DATASETS':
+    case FETCH_RESULTS:
+      return { ...state, isFetchingResults: true };
+    case UPDATE_DATASETS:
       return { ...state, datasets: action.datasets || [] };
-    case 'UPDATE_RESULTS':
-      return { ...state, suggestions: action.results || [] };
-    case 'CLEAR_RESULTS':
+    case UPDATE_RESULTS:
+      return {
+        ...state,
+        suggestions: action.results || [],
+        isFetchingResults: false
+      };
+    case CLEAR_RESULTS:
       return { ...state, suggestions: [] };
     default:
       return state;