Request for comment: Remove react palm task middleware requirement

examples/demo-app/src/store.js

@@ -21,7 +21,6 @@
 import {combineReducers, createStore, applyMiddleware, compose} from 'redux';
 import {routerReducer, routerMiddleware} from 'react-router-redux';
 import {browserHistory} from 'react-router';
-import {enhanceReduxMiddleware} from 'kepler.gl/middleware';
 import thunk from 'redux-thunk';
 // eslint-disable-next-line no-unused-vars
 import window from 'global/window';
@@ -33,7 +32,7 @@ const reducers = combineReducers({
   routing: routerReducer
 });
 
-export const middlewares = enhanceReduxMiddleware([thunk, routerMiddleware(browserHistory)]);
+export const middlewares = [thunk, routerMiddleware(browserHistory)];
 
 export const enhancers = [applyMiddleware(...middlewares)];
 

src/components/kepler-gl.js

@@ -50,6 +50,7 @@ import ModalContainerFactory from './modal-container';
 import PlotContainerFactory from './plot-container';
 import NotificationPanelFactory from './notification-panel';
 import GeoCoderPanelFactory from './geocoder-panel';
+import TaskRunner from './task-runner';
 
 import {generateHashId} from 'utils/utils';
 import {validateToken} from 'utils/mapbox-utils';
@@ -418,6 +419,7 @@ function KeplerGlFactory(
                 {interactionConfig.geocoder.enabled && <GeoCoderPanel {...geoCoderPanelFields} />}
                 <BottomWidget {...bottomWidgetFields} />
                 <ModalContainer {...modalContainerFields} />
+                <TaskRunner />
               </GlobalStyle>
             </ThemeProvider>
           </IntlProvider>

src/components/task-runner.js

@@ -0,0 +1,31 @@
+import {useEffect} from 'react';
+import {taskMiddleware} from 'react-palm/tasks';
+import {useStore} from 'react-redux';
+
+const IDENTITY = i => i;
+
+function runTasks(store) {
+  // Run the taskMiddleware without a dummy action
+  return taskMiddleware(store)(IDENTITY)(null);
+}
+
+export default function TaskRunner() {
+  const store = useStore();
+
+  useEffect(() => {
+    if (!store) {
+      return;
+    }
+    // Initial batch of tasks on initialization of store
+    runTasks(store);
+
+    // Subscribe to subsequent updates
+    const unsubscribe = store.subscribe(() => {
+      runTasks(store);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [store]);
+  return null;
+}

src/middleware/index.js

@@ -18,17 +18,12 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-// Extra helpers for redux
-// We are exposing this secause react-palm has no UMD module and
-// users need taskMiddleware to initiate their redux middle ware
-import {taskMiddleware} from 'react-palm/tasks';
-
 /**
- * This method is used to enhance redux middleware and provide
- * functionality to support react-palm
+ * @deprecated This method is provided just for backward compatibility. You may stop
+ * using this now.
  * @param middlewares current redux middlewares
  * @returns {*[]} the original list of middlewares plus the react-palm middleware
  */
 export function enhanceReduxMiddleware(middlewares = []) {
-  return [...middlewares, taskMiddleware];
+  return middlewares;
 }