Связывание с отдельным компонентом реакции перевождь

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 в основном имеет задачу отображения этого списка в текстовом формате вместе с картой.

Когда я нажимаю на маркер, я вижу, что мой список успешно обновляется с соответствующими данными, просматривая реактивные инструменты разработчика в моем браузере. Но изменения не распространяются на представление ControlPanelContainer. Это происходит потому, что функция, которая обновляет состояние в MapContainer частях коды не связана с экземпляром ControlPanelContainer (я думаю), т.е. props.onMarkerClick:

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

мой вопрос, как функция внутри одного компонент должен быть связан с отдельным компонентом? Большинство обучающих онлайн-страниц, похоже, связаны с чем-то, что выглядит следующим образом:

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

т. Е. Привязка компонента к себе. Моя первая интуиция заключалась в том, чтобы создать функции обновления в том же файле, что и класс App, и передать их как реквизиты для ControlPanelContainer и MapContainer. Однако метод подключения, похоже, не очень хорошо работает с переданными в него реквизитами.

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

Я не уверен, если есть элегантное решение этой проблемы, или если текущая структура моего кода показывает, что я не думал в «среагировать» способ.

Answer 1

Все действия должны проходить через редукторы. Нет прямого действия от компонента к компоненту в redux.

Так что вам нужно сделать, чтобы запустить действие при щелчке маркера, что приведет к созданию нового состояния из соответствующего редуктора. В свою очередь состояние обновления сделает связанные свойства должны быть обновлены, поэтому в ControlPanelContainer вы должны иметь markers опору (или эквивалент) плюс что-то вроде этого:

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

С xxx быть имя редуктора для маркеров и yyy объект, содержащий маркеры в состоянии.

Любое обновление state.xxx от Redux вызовет изменение в вашем компоненте markers.