Использование Redux с реактивной сеткой

Question

Я использую реагирующую сетку (RGL) для реализации этого варианта использования с двумя соображениями

• сохранить состояние приложения, включая дочерние компоненты GridItems

• включить связь между дочерними компонентами GridItems (события, потоки данных,

так далее)

Изучая дерево RGL на инструментах React Dev, я вижу, что существует много промежуточных компонентов.

Мне было интересно, если кто-нибудь реализовал подобный сценарий, и есть ли способ использовать хранилище Redux и передать его по дереву RGL дочерним компонентам GridItems.

<ResponsiveReactGridLayout
<ReactGridLayout
<div
<GridItem
<DraggableCore
<Resizable
<div
<UserChildComponent

Большое спасибо,

Fo

Answer 1

Отвечая на мой собственный вопрос:

Тот факт, что в дереве много невидимых элементов, не мешает передать хранилище по элементу. Наши пользовательские компоненты (т. Е. Подкомпоненты GridItem и листья в дереве компонентов) могут получить хранилище, используя соединение редуктора как обычно.

Реагировать сетки-макет

class Layout extends React.PureComponent {
render() {
return (
  <div>
    <ResponsiveReactGridLayout
      onBreakpointChange={this.onBreakpointChange}
      {...this.props}
    >
      {_.map(this.state.items, el => this.createElement(el))}
    </ResponsiveReactGridLayout>
  </div>


export default connect(state => state)(Layout);

Пользовательский компонент

class myCustomComponent extends Component {

export default connect(state => state) (myCustomComponent);

Результирующее дерево компонентов в ReactDevTools,

<Connect(Layout)
 <ResponsiveReactGridLayout
  <ReactGridLayout
   <div
    <GridItem
     <DraggableCore
      <Resizable
       <div
        <Connect(UserChildComponent)

и магазин и отправка излишков являются частью их реквизита.