Уровень компонентов, слушающих одно и то же состояние редукции

Моя ситуация выглядит следующим образом:

У меня есть 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 в родительский компонент в любом случае. Особенно если оба компонента требуют одинаковую часть состояния.

Другие вопросы по тегам