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

Я понимаю, что это фундаментальный вопрос, на который, возможно, уже был дан ответ, но я ищу окончательный ответ, возможно, с некоторыми аргументами, поскольку я не совсем нашел тот, который убеждает меня в том, что существует лучший / лучший / предпочтительный способ справиться с этим.

Сценарий. Компонент панели управления получает состояние redux через соединение. Некоторые данные используются совместно с панелью управления и ее дочерними элементами. Некоторые данные относятся к дочерним элементам приборной панели.

Вопрос: должен ли я всегда передавать свойства дочерним компонентам (что-то), как показано ниже, или я должен всегда подключать дочерние компоненты к redux и считывать необходимые данные прямо из состояния redux?

import React, { Component } from "react";
import { connect } from "react-redux";
import ChildOne from ".ChildOne";
import ChildTwo from ".ChildTwo";

class DashboardExample extends Component {
  render() {
    const { sharedData, childOneData, childTwoData } = this.props
    return (
      <div>
        <h1>{sharedData.selectedDate}</h1>
        <ChildOne sharedData={sharedData} childOneData={childOneData} />
        <ChildTwo sharedData={sharedData} childTwoData={childTwoData} />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  sharedData: state.dashboardData,
  childOneData: state.childOneSpecificData,
  childTwoData: state.childTwoSpecificData,
});

export default connect(mapStateToProps)(DashboardExample);

redux react-redux
person Kim    schedule 24.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Как сказал Дэн Абрамов, хорошо иметь разделение на презентационные компоненты и компоненты-контейнеры.

Презентационные компоненты

  1. Обеспокоены тем, как все выглядит.

  2. Может содержать как презентационные, так и контейнерные компоненты ** внутри и обычно иметь собственную разметку и стили DOM.

  3. Часто разрешайте сдерживание через this.props.children.

  4. Не иметь зависимостей от остальной части приложения, например от действий или хранилищ redux.

  5. Не указывайте, как данные загружаются или изменяются.

  6. Получайте данные и обратные вызовы исключительно через реквизиты.

  7. Редко имеют собственное состояние (когда они есть, это состояние пользовательского интерфейса, а не данные).

  8. Написаны как функциональные компоненты, если они не нуждаются в состоянии, хуках жизненного цикла или оптимизации производительности.

Компоненты контейнера

  1. Обеспокоены тем, как все работает.
  2. Может содержать как презентационные, так и контейнерные компоненты ** внутри, но обычно не имеют собственной разметки DOM, за исключением некоторых обертывающих div, и никогда не имеют стилей.
  3. Предоставьте данные и поведение презентационным или другим компонентам контейнера.
  4. Вызвать действия redux и предоставить их как обратные вызовы для презентационных компонентов.
  5. Часто сохраняют состояние, поскольку они, как правило, служат источниками данных.
  6. Обычно генерируются с использованием компонентов более высокого порядка, таких как connect () из React Redux, createContainer () из Relay или Container.create () из Flux Utils, а не написаны вручную.

исходный пост

————————————

Конкретный ответ на ваш вопрос:

Я считаю полезным придерживаться изложенных выше принципов. Это упрощает понимание вашего кода и помогает разделить проблемы (представления / бизнес-логика). Но если вы обнаружите, что пишете реквизиты для спагетти, чтобы придерживаться этого, или если это не кажется естественным в конкретном фрагменте кода, просто подключите свой презентационный компонент.

person victor.ja    schedule 24.02.2019
comment
Привет, Дэн. Я надеюсь, что в Лондоне к тебе хорошо относятся. Ты восхитителен! Спасибо за эти рекомендации. Вы не поверите, но я читал это не раз раньше :) Размышляя над этим, я рискну и скажу, что я думаю, вы имеете в виду, для описанного мной сценария. , что дочерние компоненты, если они являются презентационными, а они, как вы описали выше, должны получать свои реквизиты от панели управления или какого-либо компонента более высокого уровня контейнера, который я создам поскольку панель управления на самом деле является презентационной, которая будет получать состояние от redux (и передавать его как реквизиты). Я тебя понимаю? - person Kim; 24.02.2019
comment
Привет, Виктор ... Я только что понял, что ты не Дэн, но ты все равно классный! - person Kim; 24.02.2019
comment
Рад помочь тебе, Ким! Да, вы поняли, о чем я говорил. Удачного кодирования! - person victor.ja; 24.02.2019