在 Redux 架构中集成 React 和 OpenLayers



我们公司目前正在开发一种新的网络制图解决方案。到目前为止,我们决定使用ReactOpenLayers 4.由于我们希望将Redux模式用于我们的架构,因此将有一个 redux 存储来保存应用程序状态。

我们在这个堆栈中面临的问题如下:
map是我们应用程序中的核心元素,它的实例需要传递给许多不同的组件。例如,用于在地图上绘制要素的工具需要对map实例的引用,以便它可以将自身作为交互工具添加到该实例中。
我们讨论了如何构建我们的应用程序,以最可靠的方式将OpenLayersReact集成,最终采用了两种不同的方法:

  1. 我们讨论的第一种方法是在应用程序范围的 redux 存储中保存对 map 对象的引用,以便它可以通过react-redux@connect注释函数传递给任何组件。 虽然此解决方案提供了对map的轻松访问,但我们想知道这是否是一种易于处理的方法,因为存储应保持最小,并且map对象在应用程序的整个生命周期中永远不会更改。

  2. 第二种方法将渲染组件(如上面提到的绘制交互)视为 react map 组件的子组件。然后,可以将map实例作为prop直接传递给映射组件的子组件,或者通过使用Provider模式利用 reactcontext对象。
    然而,react 文档明确建议不要使用context,尽管我们发现许多使用这种模式的解决方案(react-geo、react-leaflet)以及像react-redux这样的流行库使用它。
    因此,我们考虑使用React.Children.map()克隆子组件,然后将map作为prop添加到其中。

我希望我们面临的问题足够清楚。就react最佳做法而言,我们不知道有什么更好的办法。

哪种架构更适合设计/管理和应用程序的"反应方式",为什么?

我来晚了,但六个月前我会建议使用上下文API,因为Redux正在使用它。作为替代解决方案,我将简单地在 window.app.cache 上维护一个全局对象引用。

现在,React Context API 是实现这一目标的方法。希望佐贺没有使项目复杂化!

最新更新