webentwicklung-frage-antwort-db.com.de

So strukturieren Sie Redux-Komponenten/Container

Ich verwende redux und bin nicht sicher, wie ich meine Komponenten organisieren soll. Ich denke, das Beste ist, sie in Ordnern mit dem Namen der Hauptkomponente als Namen des Ordners und allen inneren Komponenten zu speichern: 

 Komponenten 
 Allgemeines/Dinge wie Links, Überschriftstitel etc 
 Formular/Schaltflächen, Eingaben usw 
 Player/alle kleinen Komponenten, aus denen der Player besteht 
 index.js Dies ist die oberste Layoutkomponente 
 playBtn.js 
 artistName.js 
 songName.js 
 Episode/eine andere Komponente

Im Containerordner habe ich einen Container pro Seite. Dies sind die einzigen, die ich tatsächlich mit Redux verbinde:

Behälter/
 HomePageApp.js 
 EpisodePageApp.js 
 ...

und dann sind die Aktionen eine für jede obere Komponente und nicht eine für jede Seite. In dem Seitencontainer, den ich mit Redux verbinde, übergebe ich alle Aktionen der auf dieser Seite verwendeten Komponenten. Zum Beispiel:

Aktionen/
 Spieler.js 
 Episode.js 
 ...

Mache ich das richtig? Ich habe nicht viele Informationen darüber gefunden, dass es googelt, und diejenigen, von denen ich glaube, dass sie auf kleine Projekte beschränkt sind.

Vielen Dank!

javascriptreactjsreduxreactjs-flux
43
Franco Risso

In den offiziellen Beispielen haben wir mehrere Verzeichnisse der obersten Ebene:

  • components für "dumm" React Komponenten, die Redux nicht kennen;
  • containers für "intelligente" React-Komponenten, die an Redux angeschlossen sind;
  • actions für alle Aktionsersteller, wobei der Dateiname einem Teil der App entspricht;
  • reducers für alle Reduzierungen, wobei der Dateiname dem Zustandsschlüssel entspricht;
  • store zur Speicherinitialisierung.

Dies funktioniert gut für kleine und mittelgroße Apps.

Wenn Sie mehr modulare und gruppenbezogene Funktionen zusammenstellen möchten, ist Ducks oder andere Möglichkeiten, Funktionalität nach Domäne zu gruppieren ist eine schöne Alternative zur Strukturierung Ihrer Redux-Module.

Wählen Sie letztendlich die Struktur aus, die für Sie am besten geeignet ist. Auf keinen Fall können Redux-Autoren besser als Sie wissen, was für Sie am besten geeignet ist.

94
Dan Abramov

Dies ist eher eine Frage zu Best Practices/Code-Stil, und es gibt keine klare Antwort. Im Projekt " React redux boilerplate " wurde jedoch ein sehr netter Stil vorgeschlagen. Es ist dem, was Sie derzeit haben, sehr ähnlich.

./react-redux-universal-hot-example
├── bin
├── src
│   ├── components // eg. import { InfoBar } from '../components'
│   │   ├── CounterButton
│   │   ├── GithubButton
│   │   ├── InfoBar
│   │   ├── MiniInfoBar
│   │   ├── SurveyForm
│   │   ├── WidgetForm
│   │   └── __tests__
│   ├── containers // more descriptive, used in official docs/examples...
│   │   ├── About
│   │   ├── App
│   │   ├── Home
│   │   ├── Login
│   │   ├── LoginSuccess
│   │   ├── NotFound
│   │   ├── RequireLogin
│   │   ├── Survey
│   │   ├── Widgets
│   │   └── __tests__
│   │       └── routes.js // routes defined in root
│   ├── redux
│   │   ├── init.js
│   │   ├── middleware
│   │   │   └── clientMiddleware.js  // etc
│   │   └── modules // (action/creator/reducer/selector bundles)
│   │       ├── auth.js
│   │       ├── counter.js
│   │       ├── reducer.js  
│   │       ├── info.js
│   │       └── widgets.js
│   ├── server
│   │   ├── middleware
│   │   └── actions // proxy to separate REST api...
│   └── utils
│   │   ├── validationUtility.js // utility only (component-level definitions inside respective dir)
│       └── createDevToolsWindow.js  // etc
├── static
│   ├── dist
│   └── images
└── webpack
15
Kloar

Ich ziehe es vor, intelligente und dumme Komponenten in derselben Datei zu belassen, benutze jedoch den Standardexport für intelligente Komponenten und den Export für Präsentations- und dumme Komponenten. Auf diese Weise können Sie das Rauschen von Dateien in Ihrer Verzeichnisstruktur reduzieren. Gruppieren Sie Ihre Komponenten auch nach "Ansicht", d. H. (Administration => [admin.js, adminFoo.js, adminBar.js]), Inventory => [inventory.js, inventoryFoo.js, inventoryBar.js] usw.). 

4
dakt

Ich habe keine feste Meinung zu den Komponentenverzeichnissen, aber ich mag es, die Aktionen, Konstanten und Reduzierungen zusammenzusetzen:

state/
  actions/
    index.js
    ...
  constants.js
  reducers.js

Ich habe Alias ​​state mit mit webpack, damit ich in den Container-Komponenten import {someActionCreator} from 'state/actions'; kann.

Auf diese Weise befindet sich der gesamte zustandsbehaftete Code in der App an einem einzigen Ort.

Beachten Sie, dass reducers.js in mehrere Dateien aufgeteilt werden kann, indem Sie einfach ein reducers/-Verzeichnis wie actions/ erstellen und Sie keine Importanweisungen ändern müssen.

1
w00t

In Redux haben Sie einen Einstiegspunkt für Ihre Aktionen (Aktionen/Ordner) und einen Einstiegspunkt für die Reduktionen (Reduktionen/Ordner).

Wenn Sie sich für eine domänenbasierte Codestruktur entscheiden, vereinfachen Sie die Implementierung und Wartung von Domänen/Features. Auf der anderen Seite verkomplizieren Sie Komponentenabhängigkeiten und die Wartung von App-Status/Logik.

Wo werden Sie wiederverwendbare Komponenten einsetzen? in Feature-/Domain-Ordner? Wenn Sie also eine wiederverwendbare Komponente aus einem anderen Feature/einer anderen Domäne benötigen, müssen Sie eine Abhängigkeit zwischen den Domänen erstellen. mmh nicht so gut für große app!

Wenn Sie Reduzierungen kombinieren müssen, nimmt die Domain-Code-Struktur das zurück, was Sie zuvor erhalten haben.

Sie erstellen nur einzelne Redux-Module für jede Domäne/jedes Feature . Die Domänencodestruktur sollte in einigen/den meisten Fällen gut sein, aber dies ist nicht Redux.

0
luk_z