我正在使用redux来管理我的应用程序状态,并使用Google地图(或其他地图)来显示我的数据.
我有一个非常复杂的UI,并希望通过redux对其进行管理.但是我在下面有一个问题：
>我有两个组件A和B,它们在单独的部分中,A是一个按钮,B是其中包含Google map作为内部属性的组件,称为“ map”
>单击A时,我想触发map.panBy(-10,-20),结果是中心将被更改,但是通过执行panBy会有动画,在这种情况下(-10,-20)不会结果,它只是偏移量,因此将其(偏移量)保存在商店中并不是一个好主意.我该怎么办？
>解决方案I：使用redux数据流,调度一个{type：’panBy’,有效负载：[-10,-20]}之类的操作,然后当组件B获取数据时,执行map.panBy(-10,-20) . -> -10,-20是临时参数,存放它们很奇怪.
解决方案II：Eventbus,组件A触发事件,组件B订阅它.
>解决方案III：将地图公开到其父对象或窗口对象. ->也很奇怪
我可以使用redux中间件吗？但是中间件DONOT也知道该地图.
>您有一些数据
>您将在地图上显示该数据.
您的问题有点不清楚-是panBy参数是否是您在redux状态下存储的数据.
您将这些参数存储在redux状态有点奇怪,因为这些是您一次执行的更多操作,而不是事物的客观数据.
我的意思是-我想您将要存储在状态中的数据类型将是诸如“名称”,“地址”,“纬度”之类的数据,这些数据在应用时总是看起来相同.每次您显示“平移”数据时,其显示方式将有所不同.
但是无论如何-如果您只是显示/应用处于redux状态的内容-我将要做的是：
>通过mapStateToProps将redux状态连接到组件
>实施componentDidUpdate,如果mapData已更新,则应用所有相关的地图方法.
但是回到panBy的事情-我建议您应该存储地图中心和缩放级别,而不是存储panBy参数.这样,每次应用时它看起来都一样.
或者,您可以存储原始的center和panBy参数,并使用它们每次重新计算地图.
即. redux状态如下：
mapState: {
center: {
x: 100,y: 200,},panBy: {
x: 10,y: 0
}
}
然后在您的componentDidUpdate中将其更新-并应用平底锅,例如：
componentDidUpdate(prevProps) {
if (this.props.mapState !== prevProps.mapState) {
const {mapState} = this.props.mapState;
Map.center(mapState.center);
Map.panBy(mapState.panBy);
}
}
这样做的缺点-是您每次都在地图上进行多余的中心更新,并且根据API的工作方式,它可能看起来很糟糕.
我确实认为更好的解决方案是自己手动重新计算中心-如Spark.Bao所建议.
