Четко назначить вложенный this.props const в рендере

Question

В render() я передаю много переменных вокруг.Лучшие практики, кажется, указывают на то, чтобы делать подобные вещи, прежде чем вызывать return <div>...etc</div:

const {
        products: mainProducts,
        parent,
        getProductsByOffset,
        offset,
        count,
        formOnChange,
        isGettingMissingProducts
    } = this.props

, что все хорошо и хорошо, но у меня есть один конкретный объект, который мне нужно получить, который вложен глубоко.Вместо того, чтобы заставить объект (ы) делать:

        const assignProducts = this.props.parent.props.input.values

как бы мне было извлечь его красиво?Я предполагаю, что это возможно и в наилучшей практике, чтобы быть в состоянии сделать это в соответствии с тем, как я сделал products: mainProducts

Answer 1

С точки зрения передового опыта, глубоко вложенные объекты считаются хрупкими, потому что код, который зависит от этой структуры глубокого вложения, сломается, если эта структура вложений где-либо изменится.

Существует множество методов, позволяющих избегать глубоко вложенных объектов.Одним из них является «нормализация» ваших данных в виде набора плоских или почти плоских списков.См. «Нормализация формы состояния» в документации Redux.

Если вам нужно работать с вложенными данными, предполагая, что данные поступают из вашего состояния Redux, вы все равно можете отделить вложенную структуру от своей.код рендеринга, создав функцию селектор , которую вы вызываете в mapStateToProps().Обычно вы помещаете код селектора рядом с редуктором (возможно, в том же файле, что и редуктор).Когда вы изменяете форму состояния редукции путем изменения редуктора, вы затем обновляете селектор, чтобы отразить новую форму.Ваш код компонента дисплея и ваш mapStateToProps защищены от этих изменений и будут продолжать работать без изменений кода.

Ваш селектор будет выглядеть так:

export const Selectors = {
    getInputValues: state => state.parent.props.input.values
}

Тогда ваш mapStateToProps() будетвыглядеть так:

import { Selectors } from '../reducer'; // wherever your reducer is
const mapStateToProps = state => {
    return {assignProducts: Selectors.getInputValues(state)}
}

Answer 2

Я думаю, что ваш const assignProducts = this.props.parent.props.input.values выглядит лучше, чем любая другая альтернатива, но если вы хотите продолжить деструктуризацию для извлечения этого вложенного свойства, вы можете использовать следующий синтаксис:

const {
  products: mainProducts,
  parent,     // if you only need the `assignProducts`, remove this line
  parent: { props: { input: { values: assignProducts }}},
  getProductsByOffset,
  offset,
  count,
  formOnChange,
  isGettingMissingProducts
} = this.props

Обратите внимание, что вы можетеизвлеките оба свойства parent (если вам это нужно) и извлеките свойство внутри parent сразу.Но это выглядит немного страшнее, чем ваш оригинальный код IMO.