reactjs - kepler.gl 状态不存在。您可能忘记在根减速器中安装 keplerGlReducer

Question

我尝试融入kepler.glreact -boilerplate。

我像这样在应用程序减速器中安装 kepler.gl 减速器

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 状态不存在。你可能会忘记在你的根 reducer 中挂载 keplerGlReducer。如果默认没有挂载为 state.keplerGl，你需要提供 getState 作为 prop

并且地图没有显示在页面中，但是我可以像这样从 redux DevTools 中看到 keplerGl 状态。

你能建议如何解决这个问题吗？谢谢！

标签： reactjskepler.gl

Answer 1

这是我的代码，它有效。

我认为你忘记了 add enhanceReduxMiddleware;

我希望这对你有帮助。

减速器.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;
};