Wie visualisiert man ReactJS + redux Datenfluss, Filiale und Komponentenhierarchie

Question

Um das Projekt unseres Teams richtig einzurichten und Wissen effizient zu teilen, möchte ich unsere reactjs + redux Struktur visuell darstellen.

Für eine MySQL-Datenbank würde ich mySQL Workbench verwenden.

Was wäre die beste Option für eine reactJS + Redux-Anwendung?

Vielen Dank!

EDIT

die ersten Reaktionen nach, würde ich lügen hinzufügen, dass ich für eine visuelle Art und Weise bin auf der Suche eine Komponente und zu speichern Hierarchie darzustellen, um die UI zu helfen zu bauen. Ich würde gerne Diagramme usw. verwenden. Skipper für ORM ist etwas, wonach ich suche. Microsoft Visio könnte auch sein. aber ich frage mich, ob es nicht etwas relevanteres für redux + reactjs gibt.

Answer 1

Für ReactJS empfehle ich, React DevTools für Chrome zu installieren. Es ermöglicht Ihnen, Ihre UI-Struktur zu visualisieren. Siehe hier: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Answer 2

Für Redux es auch sind DevTools die super nützlich sind alle Änderungen, die Aktionen und Staat in der App zu bekommen:

Redux DevTools ist ein Paket Entwicklungszeit, die Energie liefert -up für Ihren Redux-Entwicklungsworkflow.

• Redux devtools github
• Redux devtools chrome extension

Für Reagieren

Reagieren Developer Tools ist ein System, das Ihnen ein Reagieren Renderer inspizieren können, einschließlich der Co Komponentenhierarchie, Requisiten, Status und mehr.

• React devtools github
• React devtools chrome extension