javascript - 绑定(bind)到单独的组件react redux

Question

我有一个如下所示的基本组件:

import React from 'react'
import MapContainer from '../containers/Map'
import ControlPanelContainer from '../containers/ControlPanel'
import Sidebar from 'react-sidebar'

const App = () => (
    <div className = "sidebar">
        <Sidebar sidebar = {<div className = "control-panel"><ControlPanelContainer /></div>}
                 docked = {true}
                 pullRight={false}
                 shadow = {false}>
            <div className = "map">
                <MapContainer/>
            </div>
        </Sidebar>
    </div>
)

export default App

MapContainer 基本上创建了一个带有一堆可点击标记的 react-google-map 组件。单击时，该标记的键和位置数据将放置在数据存储中的列表中。

ControlPanelContainer 基本上的作用是在 map 旁边以文本格式显示该列表。

当我单击标记时，通过查看浏览器中的 react 开发人员工具，我可以看到我的列表已使用适当的数据成功更新。但更改不会传播到 ControlPanelContainer View 。这是因为更新代码的 MapContainer 部分中的状态的函数未绑定(bind)到 ControlPanelContainer 的实例(我认为)，即 props .onMarkerClick:

<Marker
    {...marker}
    onClick = {() => props.onMarkerClick(marker)}
/>

我的问题是一个组件内的函数如何绑定(bind)到一个单独的组件？大多数在线教程似乎都涉及以下内容:

this.component = this.component.bind(this)

即将组件绑定(bind)到自身。我的第一直觉是在与 App 类相同的文件中创建更新函数，并将它们作为 props 传递给 ControlPanelContainer 和 MapContainer。然而，connect 方法似乎不能很好地处理传递给它的 props。

const MapContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(Map)

我不确定是否有一个优雅的解决方案，或者我的代码的当前结构是否表明我没有以“ react ”方式思考。

Answer 1

所有操作都应该经过 reducer 。 redux 中组件之间没有直接的操作。

因此，您要做的就是在单击标记时触发一个操作，这将从相应的 reducer 中产生一个新状态。反过来，状态更新将使绑定(bind)属性得到更新，因此在 ControlPanelContainer 中，您应该有一个 markers 属性(或等效项)加上如下内容:

function mapStateToProps(state) {
    return {
        markers: state.xxx.yyy;
    };
}

其中xxx是标记的reducer的名称，yyy是包含状态中标记的对象。

Redux 中 state.xxx 的任何更新都会触发组件中的 markers 属性更改。