反应 + mobx + openlayers 3答案

【问题标题】：React + mobx + openlayers 3反应 + mobx + openlayers 3
【发布时间】：2017-02-24 21:41:03
【问题描述】：

我有一个使用 react 的地图应用。

它有 3 个组件：

侧边栏 - 包含将执行地图功能（例如放大）的按钮。
map-wrapper - 包含 openlayers 地图。
同时呈现它们的视图。

查看：

 export default class MapView extends Component {

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

侧边栏：

 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>

    );
  }
}

地图就是这样的： https://github.com/pka/ol3-react-example

现在我想实现以下逻辑：按下缩放将放大地图。

如何使用 mobx 做到这一点？

商店将持有什么？什么是观察者，什么是可观察者？

问候，伊多

【问题讨论】：

标签： reactjs openlayers-3 mobx

【解决方案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 的最小值/最大值。

【讨论】：

谢谢，地图实例应该在商店里？