Różnica między składnikiem a pojemnikiem w reaguje reduku

Jaka jest różnica między komponentem a pojemnikiem w React Redux?

Componentjest częścią interfejsu API React. Komponent to klasa lub funkcja opisująca część interfejsu użytkownika React.

Kontener to nieformalne określenie na komponent React, który jest connectwysyłany do sklepu Redux. Kontenery otrzymują aktualizacje stanu i dispatchakcje Redux i zazwyczaj nie renderują elementów DOM; delegują renderowanie do prezentacyjnych komponentów potomnych.

Aby uzyskać więcej informacji, przeczytaj Dana Abramova o komponentach prezentacyjnych i kontenerowych .

Komponent odpowiedzialny za pobieranie danych i wyświetlanie nazywa się komponentami smart lub kontenerowymi. Dane mogą pochodzić z redukcji, dowolnego połączenia sieciowego lub abonamentu strony trzeciej.

Głupie / prezentacyjne komponenty to te, które są odpowiedzialne za prezentację widoku na podstawie otrzymanych rekwizytów.

Dobry artykuł z przykładem tutaj

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

Komponenty tworzą przestrzeń widoku, więc powinien renderować elementy DOM, umieszczać zawartość na ekranie.

Kontenery uczestniczą w opracowywaniu danych, więc powinien „rozmawiać” z reduxem, ponieważ będzie musiał zmodyfikować stan. Więc powinieneś dołączyć connect (react-redux), co tworzy połączenie oraz funkcje mapStateToProps i 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);

React ma dwa główne komponenty, pierwszy to inteligentny komponent (kontenery), a drugi to głupi (komponent prezentacji). Kontenery są bardzo podobne do komponentów, jedyną różnicą jest to, że kontenery są świadome stanu aplikacji. Jeśli część Twojej strony internetowej jest używana tylko do wyświetlania danych (głupia), uczyń ją komponentem. Jeśli chcesz, aby był inteligentny i świadomy stanu (za każdym razem, gdy dane się zmieniają) w aplikacji, zrób z niego kontener.

składniki

Komponenty pozwalają podzielić interfejs użytkownika na niezależne części wielokrotnego użytku i pomyśleć o każdym z nich z osobna. Nazywa się je czasami „elementami prezentacji”, a głównym problemem jest wygląd rzeczy

Pojemniki

Kontenery są jak komponenty bez interfejsu użytkownika, a kontenery zajmują się tym, jak działają. . Głównie rozmawia ze sklepem Redux w celu pobrania i aktualizacji danych

zobacz porównanie tabel z Redux doc

Szczegółowe wyjaśnienie https://redux.js.org/basics/usage-with-react#presentational-and-container-components

Oba są składnikami; Kontenery są funkcjonalne, więc same nie renderują kodu HTML, a ponadto masz komponenty prezentacyjne, w których piszesz rzeczywisty HTML. Celem kontenera jest mapowanie stanu i wysyłanie do rekwizytów dla komponentu prezentacyjnego.

Czytaj dalej: Link

React, Redux to niezależne biblioteki.

React zapewnia Ci strukturę do tworzenia dokumentów HTML. Komponenty w pewien sposób reprezentują określoną część dokumentu. Metody powiązane z komponentem mogą następnie manipulować bardzo konkretną częścią dokumentu.

Redux to framework, który nakazuje określoną filozofię przechowywania i zarządzania danymi w środowiskach JS. Jest to jeden duży obiekt JS z określonymi metodami, najlepszy przypadek użycia ma postać zarządzania stanem aplikacji internetowej.

Ponieważ React zaleca, aby wszystkie dane spływały z korzenia do liści, nużące staje się zarządzanie wszystkimi rekwizytami, definiowanie rekwizytów w komponentach, a następnie przekazywanie ich do niektórych rekwizytów dzieciom. Naraża również cały stan aplikacji.

React Redux oferuje czyste rozwiązanie, w którym bezpośrednio łączy Cię ze sklepem Redux, po prostu owijając podłączony komponent wokół innego komponentu React (twojego Container ). Ponieważ w twojej implementacji, twoja implementacja już zdefiniowałaś, której części całego stanu aplikacji potrzebujesz. Więcconnect pobiera te dane z magazynu i przekazuje je jako rekwizyty do komponentu, który się otacza.

Rozważmy ten prosty przykład:

 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 funkcja przekazuje właściwość type .

W ten sposób connect działa jako kontener dla komponentu Person.