Ein React-Pattern, das im Coding von React Frontends Berücksichtigung finden sollte, ist das Container-Komponenten-Pattern.

Die Idee ist einfach:

Ein Container ruft Daten ab und rendert dann die entsprechende Unterkomponente. So simpel.

“Entsprechend” bedeutet eine Komponente mit demselben Namensbestandteil:

GuineaPigsContainer => GuineaPigs
AnimalsContainer => Animals
EventListContainer => EventList

Konzept verstanden ?

Warum Container?

Angenommen, du hast eine Komponente, die Kommentare anzeigt. Da du noch nichts vom Container-Komponenten-Pattern gehört hast, platzierst du deinen Code so, dass  alles an einem Ort ist:

class CommentList extends React.Component {
  this.state = { comments: [] };

  componentDidMount() {
    fetchSomeComments(comments =>
      this.setState({ comments: comments }));
  }  render() {
    return (
      <ul>
        {this.state.comments.map(c => (
          <li>{c.body}—{c.author}</li>
        ))}
      </ul>
    );
  }
}

Deine Komponente ist sowohl für das Abrufen als auch für das Präsentieren von Daten verantwortlich. Daran ist nichts „Falsches“, aber einige Vorteile von React werden damit nicht nutzbar, zB:

Wiederverwendbarkeit

CommentList kann nur unter genau den gleichen Umständen wiederverwendet werden.

Datenstruktur

Die Markup-Komponenten sollten die Erwartungen an die benötigten Daten angeben. PropTypes sind dafür optimal.
Unsere Komponente hat eine Erwartung an die Datenstruktur, kann diese jedoch nicht ausdrücken. Wenn sich der json-Endpunkt ändert, wird der Datenfluß zur Komponente unterbrochen (silent).

Noch einmal. Diesmal mit einem Container

Lass uns zunächst den Datenabruf in eine Containerkomponente verlagern:

class CommentListContainer extends React.Component {
  state = { comments: [] };  componentDidMount() {
    fetchSomeComments(comments =>
      this.setState({ comments: comments }));
  }  render() {
    return <CommentList comments={this.state.comments} />;
  } 
}

Lass uns nun CommentList überarbeiten, um comments als prop zu verwenden:

const CommentList = props =>
  <ul>
    {props.comments.map(c => (
      <li>{c.body}—{c.author}</li>
    ))}
  </ul>

Also, was haben wir damit erreicht ?

Tatsächlich eine ganze Menge….

• Wir haben das Abrufen und Rendern von Daten getrennt.
• Wir haben unsere CommentList-Komponente wiederverwendbar gemacht.
• Wir haben CommentList die Möglichkeit gegeben, PropTypes festzulegen und damit ggf. auch im Fehlerfall “laut” zu scheitern.

Containerkomponenten können die Struktur und Lesbarkeit von React-Code erheblich verbessern und sie erleichtern das Lesen des Komponenten-Codes.

Probiere es aus !