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; }