Уровень компонентов, слушающих одно и то же состояние редукции
Моя ситуация выглядит следующим образом:
У меня есть 1 поле в моем состоянии избыточности, это не что иное, как объект следующего типа: {String, [{String, Float}]}
, Это поле в моем состоянии используется двумя компонентами (которые выполняют запросы к GraphQL с помощью String
как переменная).
Оба компонента связаны через connect
метод (с использованием синтаксиса декоратора).
@connect((state) => ({variable: state.variable.field}))
@graphql(QUERY, {...})
export default class Component1 extends React.Component { ... }
@connect((state) => ({variable: state.variable.field}))
@graphql(QUERY, {...})
export default class Component2 extends React.Component { ... }
Ничего особенного, так как это работает для всех остальных Component
, Тем не менее, когда я вызываю эти компоненты на одном уровне при регистрации состояния в их render
методы:
<div>
<Component1 />
<Component2 />
</div>
Component1
регистрирует состояние как есть, Component2
регистрирует начальное состояние. Когда я переключаю компоненты на место:
<div>
<Component2 />
<Component1 />
</div>
Происходит обратное: Component2
регистрирует правильное состояние, Component1
не делает.
Когда я называю один из компонентов внутри друг друга (где Component1
звонки Component2
как часть их рендера) все нормально.
Я не уверен, что здесь происходит, и при этом я не могу найти никакой документации, утверждающей, что вы не должны вызывать 2 компонента, слушающих одно и то же состояние в одном месте.
Надеюсь, кто-то может помочь мне понять, что происходит
1 ответ
Обычно это не должно быть проблемой. Так может проблема связана с вашим кодом? (Просто дикая догадка без какого-либо реального кода!)
Но я бы предложил снять connect
Redux в родительский компонент в любом случае. Особенно если оба компонента требуют одинаковую часть состояния.