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

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

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

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

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

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

контейнеры участвуют в разработке данных, поэтому он должен "говорить" с redux, потому что ему нужно будет изменить состояние. Итак, вы должны включить подключиться (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);

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

читайте далее: ссылке

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

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

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

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

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.