javascript - 在 Redux 架构中集成 React 和 OpenLayers

标签 javascript reactjs redux react-redux openlayers

我们公司目前正在开发一种新的网络 map 解决方案。到目前为止,我们决定使用 React 构建应用程序和 OpenLayers 4 .因为我们要使用 Redux我们架构的模式将有一个保存应用程序状态的 redux 存储。

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

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

  2. 第二种方法将渲染组件(如上述绘制交互)视为 React map 组件的子组件。 map然后可以将实例作为 prop 直接传递给 map 组件的子组件。或利用 react context使用 Provider 的对象图案。
    然而,react documentation明确建议不要使用 context ,虽然我们发现了许多使用这种模式的解决方案( react-georeact-leaflet )以及流行的库,如 react-redux好好利用它。
    因此,我们考虑使用 React.Children.map()克隆子组件,然后添加 map对他们来说是prop .

我希望我们面临的问题足够清楚。我们不知道在 react 方面更好的方法是什么最佳实践。

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

最佳答案

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

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

关于javascript - 在 Redux 架构中集成 React 和 OpenLayers,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48457999/

相关文章:

javascript - http fetch basic auth - 使用浏览器凭证

css - 改变内部元素样式的 material-ui 图标

javascript - 服务器 : how to get "window", "location"和其他 "window"属性以及通常是浏览器对象上的浏览器代码?

node.js - 新的 React 项目 2.1 因 NPM ERR 而失败! 418我是茶壶

javascript - 添加了一个 props onPress,因为我正在调用事件handleEvent。但方法内没有打印任何内容

reactjs - 使用 typeof react Redux Action 类型

javascript - 使用 Facebook API 更改 Facebook 应用程序的基本设置

javascript - angular-ui select2 initSelection 没有被调用

android - 热重载不起作用,需要Hot Restart Flutter

javascript - 扩展 Number 得到一个自然数