Redux: Ребенок получает реквизит перед родителем

Question

Мое приложение имеет состояние, которое может иметь или не иметь объект user.

У меня есть два контейнера и два компонента:

ParentContainer:

const mapStateToProps = (state) => ({ 
    showUserDetails: Boolean(state.user), 
}) 

export default connect(mapStateToProps)(ParentComponent) 

ParentComponent:

const ParentComponent = ({ showUserDetails }) => (
    <div> 
    {showUserDetails && <ChildContainer />} 
    </div> 
) 

ChildContainer:

const mapStateToProps = (state) => ({ 
    name: state.user.name, 
}) 

export default connect(mapStateToProps)(ChildComponent) 

ChildComponent:

const ChildComponent = ({ name }) => (
    <h1>{name}></h1> 
) 

Однако я бегу в сценариях, где, после того, как действие, которое устанавливает state.user = null, ChildContainer пытается оказать, прежде чем ParentContainer и, следовательно, бросает исключение, поскольку он не может получить доступ к null.name.

Является ли это ожидаемым поведением Redux, что дочерний контейнер может повторно отобразить перед родителем? В классическом потоке React эта ошибка не произойдет.

Я ценю в этом надуманном примере, можно просто позвонить <ChildComponent name={user.name} /> в ParentComponent вместо использования контейнера. Но в реальном мире у меня есть глубоко вложенные компоненты, обращающиеся к множеству разных частей государства, поэтому они не могут просто легко передавать реквизиты.

Answer 1

Вы доставляете свои рассылки Redux? Если не читали релиз v3.0.0 отмечает тщательно:

https://github.com/reactjs/react-redux/releases/tag/v3.0.0

Он предлагает redux-batched-updates модуль, но это более или менее устаревшим в пользу redux-batched-subscribe

Используйте это так:

import { unstable_batchedUpdates as batchedUpdates } from 'react-dom'; 
import { batchedSubscribe } from 'redux-batched-subscribe'; 

const store = createStore(reducer, intialState, batchedSubscribe(batchedUpdates)); 

Answer 2

Обновление произойдет независимо от дочернего компонента, содержащегося в родительском или нет. Поскольку он находится в DOM во время обновления, connect попытается обновить ваш компонент.

Простейшим способом для этого было бы включить проверку безопасности при потянув имя пользователя (state.user.name,) и заменить его на (state.user && state.user.name,).

Или, конечно, альтернатива. Передача его от родителя.

Чтобы дополнительно объяснить, опоры, которые отправляются вниз от родителя, сначала будут оцениваться в родительском объекте, а затем обновления будут распространяться вниз в иерархическом дереве. Тем не менее, поскольку ваша поддержка name действительно поступает непосредственно из дерева состояний, вам понадобятся некоторые проверки безопасности.

Даже если родительский объект после последующего обновления сам по себе решит, что ребенок больше не будет отображаться (поскольку showUserDetails теперь будет оцениваться как false).