Разница между компонентом и контейнером в React Redux

В чем разница между компонентом и контейнером в React redux?

Componentявляется частью React API. Компонент - это класс или функция, описывающая часть пользовательского интерфейса React.

Контейнер - это неформальный термин для компонента React, который connectсвязан с хранилищем redux. Контейнеры получают обновления состояния и dispatchдействия Redux , и они обычно не отображают элементы DOM; они делегируют рендеринг презентационным дочерним компонентам.

Подробнее читайте в статье Дэна Абрамова о компонентах презентации и контейнера .

Компонент, который отвечает за выборку и отображение данных, называется интеллектуальными или контейнерными компонентами. Данные могут поступать из redux, любого сетевого вызова или сторонней подписки.

Тупые / презентационные компоненты - это те, которые отвечают за представление представления на основе полученных реквизитов.

Хорошая статья с примером здесь

https://www.cronj.com/blog/difference-container-component-react-js/

Компоненты составляют часть представления, поэтому оно должно отображать элементы DOM, помещать контент на экран.

Контейнеры участвуют в обработке данных, поэтому он должен «разговаривать» с redux, потому что ему нужно будет изменить состояние. Итак, вы должны включить connect ( react- redux ), что он делает соединение, и функции mapStateToProps и mapDispatchToProps :

.
.
.
import { connect } from "react-redux";

class myContainer extends Component {
}

function mapStateToProps(state) {
  // You return what it will show up as props of myContainer
  return {
    property: this.state.property
  };
}

function mapDispatchToProps(dispatch) {
  // Whenever property is called, it should be passed to all reducers
  return bindActionCreators({ property: property }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(myContainer);

Составные части

Компоненты позволяют разделить пользовательский интерфейс на независимые, повторно используемые части и рассматривать каждую часть отдельно. Их иногда называют «презентационными компонентами», и главное - как все выглядит.

Контейнеры

Контейнеры похожи на компоненты без пользовательского интерфейса, а контейнеры связаны с тем, как все работает. , В основном он обращается к хранилищу redux для получения и обновления данных.

см. сравнение таблиц из Redux doc

Подробное объяснение https://redux.js.org/basics/usage-with-react#presentational-and-container-components

Они оба являются компонентами; контейнеры являются функциональными, поэтому они не отображают HTML-код сами по себе, а также у вас есть презентационные компоненты, в которых вы пишете фактический HTML. Цель контейнера - отображать состояние и отправку на свойства для презентационного компонента.

Дополнительная литература: Ссылка

React, Redux - это независимые библиотеки.

React предоставляет вам основу для создания HTML-документов. Компоненты в некотором роде представляют определенную часть документа. Затем методы, связанные с компонентом, могут управлять самой конкретной частью документа.

Redux - это фреймворк, который предписывает определенную философию хранения и управления данными в средах JS. Это один большой JS-объект с определенными определенными методами, лучший вариант использования - это управление состоянием веб-приложения.

Поскольку React предписывает, чтобы все данные передавались от корня к листьям, становится утомительно управлять всеми props, определяя props в компонентах и ​​затем передавая props определенным props дочерним элементам. Это также делает уязвимым все состояние приложения.

React Redux предлагает чистое решение, в котором он напрямую подключает вас к хранилищу Redux, просто оборачивая подключенный компонент вокруг другого компонента React (вашего Container). Поскольку в вашей реализации вы уже определили, какая часть всего состояния приложения вам нужна. Так connectчто извлекает эти данные из хранилища и передает их как свойства компоненту, который окружает себя.

Рассмотрим этот простой пример:

 class Person extends Component {
  constructor(props){
   this.name = this.props.name;
   this.type = this.props.type;
  }

  render() {
     return <p> My name is {this.name}. I am a doctor { this.type } </p>
  }
}

 const connect = InnerComponent => { 

   class A extends Component{
     render() {
        return <InnerComponent {...this.props} type="Doctor"/>
     }
   } 
   A.displayName = `Connect(${InnerComponent.displayName})`
   return A
 }

connectфункция передает опору type.

Таким образом, соединение действует как контейнер для компонента Person.

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