kepler.gl state doesnt exist. You might forget to mount keplerGlReducer in your root reducer

Question

I try to integrate kepler.gl into react-boilerplate.

I Mount kepler.gl reducer in the app reducer like this

export default function createReducer(injectedReducers = {}) {
  const rootReducer = combineReducers({
    keplerGl: keplerGlReducer,  // mount kepler.gl reducer
    global: globalReducer,
    language: languageProviderReducer,
    ...injectedReducers,
  });

  // Wrap the root reducer and return a new root reducer with router state
  const mergeWithRouterState = connectRouter(history);
  return mergeWithRouterState(rootReducer);
}

and in the create store part, I have

  const middlewares = [
    sagaMiddleware,
    taskMiddleware,
    routerMiddleware(history),
  ];

  const enhancers = [applyMiddleware(...middlewares)];

  const store = createStore(
    createReducer(),
    fromJS(initialState),
    composeEnhancers(...enhancers),
  );

When I run the app, I get red text from console complaining

kepler.gl state doesnt exist. You might forget to mount keplerGlReducer in your root reducer.If it is not mounted as state.keplerGl by default, you need to provide getState as a prop

and the map is not displayed in the page, but I can see the keplerGl state from redux DevTools like this.

Could you suggest how to fix this issue? Thank you!

score 0 · Answer 1 · answered Feb 28 '20 at 10:56

This is my code and it works.

I think that you have forgotten add enhanceReduxMiddleware;

I hope this help you.

reducer.js

// KEPLER.GL
import keplerGlReducer from "kepler.gl/reducers";

/**
 * Creates the main reducer with the dynamically injected ones
 */
const createReducer = injectedReducers => {
    return combineReducers({
        global: globalReducer,
        language: languageProviderReducer,
        keplerGl: keplerGlReducer,
        ...injectedReducers,
    });
};

export default createReducer;

configureStore.js

import { enhanceReduxMiddleware } from 'kepler.gl/middleware';

export default function configureStore(initialState = {}, history) {

    // Create the store with two middlewares
    // 1. sagaMiddleware: Makes redux-sagas work
    // 2. routerMiddleware: Syncs the location/URL path to the state
    const middlewares = enhanceReduxMiddleware([thunk]);

    const enhancers = [applyMiddleware(...middlewares)];

    const store = createStore(
        createReducer(),
        initialState,
        composeEnhancers(...enhancers)
    );
    return store;
};

kepler.gl state doesnt exist. You might forget to mount keplerGlReducer in your root reducer

1 Answers1