2

我正在尝试将 kepler.js 包含到我的 web 应用程序中。因此，我也开始包含 Redux，这是 Kepler 的要求。

我想通过使用 react 来确保我不会失去 next.js 的好处，所以我仍然在加载不需要 redux 的静态页面，并且 SSR 和其他一切仍然正常工作。

使用 next-redux-wrapper 我已经实现了文档中的示例，然后尝试如下实现开普勒 redux 示例（结合两者）。

   //for kepler.gl
import {createStore,combineReducers,applyMiddleware, AnyAction} from 'redux';
import {MakeStore, createWrapper, Context, HYDRATE} from 'next-redux-wrapper';
import keplerGlReducer from 'kepler.gl/reducers';

//for kepler
import {taskMiddleware} from 'react-palm/tasks';


// export interface State {
//     tick: string;
// }


const base = (state = {tick: 'init'}, action) => {
    switch (action.type) {
        case HYDRATE:
            return {...state, ...action.payload};
        case 'TICK':
            return {...state, tick: action.payload};
        default:
            return state;
    }
};



//needs to be updated


const reducer = combineReducers({
  // <-- mount kepler.gl reducer in your app
  keplerGl: keplerGlReducer,

  // Your other reducers here
  app: base
});



// create a makeStore function
const makeStore = context => createStore(reducer,applyMiddleware(taskMiddleware));

    // const makeStore = (context: Context) => createStore(reducer,applyMiddleware(taskMiddleware));

// export an assembled wrapper
export const wrapper = createWrapper(makeStore, {debug: true});

这个 __app.js

import React from 'react'
import App from 'next/app'
import {wrapper} from '../redux/store';

import '../css/tailwind.css'

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

export default wrapper.withRedux(MyApp);


// export default MyApp

使用此组件作为示例地图

import KeplerGl from 'kepler.gl';
const TOKEN = 'pk.eyJ1IjoibWVlaGF3bCIsImEiOiJja2JqNWF2cDUwandnMnF0ZGdjY2hzdGM3In0.62pru3Sdn6H8KvRcUrlRTw'; // Set your mapbox token here


export default function Kepler(){


return (
<div>
<KeplerGl
      id="foo"
      mapboxApiAccessToken={TOKEN}
      width={1920}
      height={1080}/>
</div>
)
}

我想确保我没有从我的 next.js 配置中删除 SSR，并且由于某种原因，当我加载开普勒页面时，我无法加载 csv 数据而页面不死。

我也将利用 Deck.gl 并希望确保使用 next.js 将是正确的选择。

感谢任何帮助和指导，以实现这一点。

以供参考，

https://github.com/kirill-konshin/next-redux-wrapper https://docs.kepler.gl/docs/api-reference/get-started

4

0 回答 0