reactjs - kepler.gl 状态不存在。您可能忘记在根 reducer 中安装 keplerGl reducer

Question

我尝试将 kepler.gl 集成到 react-boilerplate 中。

我像这样在应用程序 reducer 中安装 kepler.gl reducer

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

在创建商店部分，我有

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

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

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

当我运行应用程序时，我从控制台收到红色文本提示

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

并且 map 没有显示在页面中，但是我可以从 redux DevTools 中看到 keplerGl 状态，如下所示。

您能建议如何解决这个问题吗？谢谢!

Answer 1

这是我的代码，它可以工作。

我认为您忘记添加 enhanceReduxMiddleware;

希望这对您有帮助。

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