React + mobx + openlayers 3

Question

私は反応を使用してマップアプリを持っています。

それは3つのコンポーネントがあります。

1. サイドバーは、 - そのようなズームとしてマップ機能を実行するボタンを含む
2. マップラッパー - OpenLayersをマップを含んでいます。
3. 両方をレンダリングするビュー。

ビュー：

export default class MapView extends Component { 

    render() { 
    return (
     <div> 
      <Sidebar /> 
      <MapWrapper /> 
     </div> 
    ); 
    } 

サイドバー：今、私は、次のロジックを実装したいと思います https://github.com/pka/ol3-react-example

：

export default class Sidebar extends Component { 
    render() { 
    return (

     <div> 
      <ul> 
      <li>MAPS</li> 
      <li onClick=zoomIn> Zoom In + </li> 
      <li onClick=zoomOut> Zoom Out - </li> 
      </ul> 
     </div> 

    ); 
    } 
} 

地図はちょうどこの次のとおりです。 ズームを押すとズームインします。

mobxを使用してこれを行うにはどうすればよいですか？

店舗は何を保持しますか？ オブザーバーとは何ですか？また、オブザーバーは何ですか？

よろしく、 イド

Answer 1

私はこのような何かをするだろう：

// The store: 
class MapStore { 
    @observable zoom = 4; 
} 

const store = new MapStore(); 

// The component: 
export default function Sidebar(props) { 
    return (
    <div> 
     <ul> 
     <li>MAPS</li> 
     <li onClick={zoomIn}> Zoom In + </li> 
     <li onClick={zoomOut}> Zoom Out - </li> 
     </ul> 
    </div> 
); 
} 

// The click handlers 
function zoomIn() { 
    store.zoom++; 
} 

function zoomOut() { 
    store.zoom--; 
} 

// The observer 
// See docs: https://mobxjs.github.io/mobx/refguide/reaction.html 
mobx.reaction(
() => store.zoom, 
    (zoom) => { 
    map.getView().setZoom(zoom); 
    } 
); 

私がカバーしていないいくつかのもの：

• はどこからmapインスタンスを取得します。
• zoomの最小値/最大値を処理します。