diff --git a/examples/demo-app/src/store.js b/examples/demo-app/src/store.js
index c28affd7fb..35b2708de4 100644
--- a/examples/demo-app/src/store.js
+++ b/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)];
diff --git a/src/components/kepler-gl.js b/src/components/kepler-gl.js
index d3fe8102d7..2d1134a26b 100644
--- a/src/components/kepler-gl.js
+++ b/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 && }
+
diff --git a/src/components/task-runner.js b/src/components/task-runner.js
new file mode 100644
index 0000000000..bf6f621610
--- /dev/null
+++ b/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;
+}
diff --git a/src/middleware/index.js b/src/middleware/index.js
index 5b36292b01..f1ffd1c5a7 100644
--- a/src/middleware/index.js
+++ b/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;
}