在Redux架构中集成React和OpenLayers

Tob*_*enB 11 javascript openlayers reactjs redux react-redux

我们目前正在为我们公司开发一个新的网络地图解决方案.到目前为止,我们决定使用React和构建应用程序OpenLayers 4.由于我们希望将Redux模式用于我们的体系结构,因此将有一个redux存储保存应用程序状态.

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

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

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

我希望我们面临的问题足够清楚.我们不知道在react最佳实践方面哪种方式更好.

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

Nic*_*ick 1

我在这里参加聚会迟到了,但六个月前我会建议使用 Context API,因为 Redux 正在使用它。作为替代解决方案,我只需在 window.app.cache 上维护一个全局对象引用。

现在,React Context API 就是实现这一目标的方法。希望 Saga 没有让项目变得复杂!