Redux: Organisation von Containern, Komponenten, Aktionen und Reduzierungen

Question

Die Frage:

Was ist die wartbar und empfohlene bewährte Methode für die Organisation von Containern, Komponenten, Aktionen und Reduzierungen in einer großen React/Redux Anwendung ?

Meine Meinung:

Aktuelle Trends scheinen redux Kollateralen (Aktionen, Reduzierungen, Sagas ...) zu organisieren, um die zugehörigen Container-Komponente. z.B.

/src 
    /components 
     /... 
    /contianers 
     /BookList 
      actions.js 
      constants.js 
      reducer.js 
      selectors.js 
      sagas.js 
      index.js 
     /BookSingle 
      actions.js 
      constants.js 
      reducer.js 
      selectors.js 
      sagas.js 
      index.js   
    app.js 
    routes.js 

Das funktioniert super! Obwohl es mit diesem Design ein paar Probleme zu geben scheint.

Die Probleme:

Wenn wir actions zugreifen müssen, selectors oder sagas aus einem anderen Behälter, den er ein Anti-Muster scheint. Nehmen wir an, wir haben einen globalen /App Container mit einem Reducer/Status, in dem Informationen gespeichert werden, die wir über die gesamte App verwenden, z. B. Kategorien und Aufzählungen. Im Anschluss an dem obigen Beispiel mit einem Zustand Baum:

{ 
    app: { 
     taxonomies: { 
      genres: [genre, genre, genre], 
      year: [year, year, year], 
      subject: [subject,subject,subject], 
     } 
    } 
    books: { 
     entities: { 
      books: [book, book, book, book], 
      chapters: [chapter, chapter, chapter], 
      authors: [author,author,author], 
     } 
    }, 
    book: { 
     entities: { 
      book: book, 
      chapters: [chapter, chapter, chapter], 
      author: author, 
     } 
    }, 
} 

Wenn wir ein selector vom /App Behälter in unserem /BookList Behälter müssen wir nutzen wollen entweder neu in /BookList/selectors.js (sicher falsch?) OR importieren von /App/selectors (wird es immer der GENAU gleiche Selektor ..? nein.). Beide Appraachen scheinen mir suboptimal zu sein.

Das Paradebeispiel für diesen Anwendungsfall ist Authentifizierung (ah ... Auth wir lieben dich zu hassen), wie es ist ein gemeinsames "Nebeneffekt" -Modell VERY. Wir müssen oft über die App auf /Auth Sagas, Aktionen und Selektoren zugreifen. Wir haben die Behälter /PasswordRecover, /PasswordReset, /Login, /Signup .... Eigentlich in unserer App unseres /Auth Contianer hat keine an allen tatsächlichen Komponenten!

Einfach alle Redux-Kollateralen für die oben erwähnten verschiedenen und oft nicht verwandten Authentifizierungscontainer.

Answer 1

Ich persönlich benutze die ducks-modular-redux Vorschlag.

Es ist nicht die „offizielle“ empfohlen, aber es funktioniert gut für mich. Jede "Ente" enthält eine actionTypes.js, actionCreators.js, reducers.js, sagas.js und selectors.js Dateien. Es gibt keine Abhängigkeit zu anderen Enten in diesen Dateien zyklische Abhängigkeit oder duck circle, die jeweils „Ente“ zu vermeiden, enthält nur die Logik, die es geschafft haben.

Dann an der Wurzel habe ich ein components und ein containers Ordner und einige Stammdateien:

components/ Ordner enthält alle reinen Komponenten meiner App

containers/ Ordner enthält Container erstellt von reine Komponenten oben. Wenn ein Container einen speziellen selector mit vielen "Enten" benötigt, schreibe ich ihn in dieselbe Datei, in die ich die <Container/> Komponente geschrieben habe, da sie relativ zu diesem spezifischen Container ist. Wenn der selector mehrere Container geteilt wird, erstelle ich es in einer separaten Datei (oder in einem HoC, der diese Requisiten bereitstellt).

rootReducers.js: macht einfach die Wurzel Reduzierungen durch alle Reduzierungen Kombination

rootSelectors.js die Wurzel Wähler für jede Scheibe des Staates macht, zum Beispiel in Ihrem Fall, dass Sie so etwas wie haben könnten:

/* let's consider this state shape 

state = { 
    books: { 
     items: { // id ordered book items 
      ... 
     } 
    }, 
    taxonomies: { 
     items: { // id ordered taxonomy items 
      ... 
     } 
    } 
} 

*/ 
export const getBooksRoot = (state) => state.books 

export const getTaxonomiesRoot = (state) => state.taxonomies 

Lassen Sie uns die Zustandsform in jeder Enten selectors.js Datei "verstecken". Da jeder selector den gesamten Zustand innerhalb Ihrer Enten erhalten, müssen Sie einfach die entsprechenden rootSelector in Ihre selector.js Dateien importieren.

rootSagas.js komponieren alle Sagas in Ihrer Ente und komplexe Strömungs den viele „Enten“ zu verwalten.

Also in Ihrem Fall könnte die Struktur sein:

components/ 
containers/ 
ducks/ 
    Books/ 
     actionTypes.js 
     actionCreators.js 
     reducers.js 
     selectors.js 
     sagas.js 
    Taxonomies/ 
     actionTypes.js 
     actionCreators.js 
     reducers.js 
     selectors.js 
     sagas.js 
rootSelectors.js 
rootReducers.js 
rootSagas.js 

Als meine „Enten“ klein genug sind, überspringe ich oft die Schaffung Ordner und schreiben Sie direkt eine ducks/Books.js oder eine ducks/Taxonomies.js Datei mit all diesen 5 Dateien (actionTypes.js, actionCreators.js, reducers.js, selectors.js, sagas.js) zusammengeführt.