Come strutturare i componenti/contenitori Redux

Question

Sto usando redux e non sono sicuro su come organizzare i miei componenti, penso che il meglio sia tenerli in cartelle con il nome del componente principale come il nome del cartella e tutti i componenti interni all'interno:

 
components 
    Common/ things like links, header titles, etc 
    Form/  buttons, inputs, etc 
    Player/ all small components forming the player 
    index.js this one is the top layout component 
    playBtn.js 
    artistName.js 
    songName.js 
    Episode/ another component 

Poi, nella cartella contenitori, ho un contenitore per pagina, che sono le uniche realtà sto connettono a Redux:

 
containers/ 
    HomePageApp.js 
    EpisodePageApp.js 
    ... 

e quindi le azioni sono una per ogni componente superiore, invece di una per pagina, quindi nel contenitore della pagina che io connettersi a Redux Passare tutte le azioni dei componenti utilizzati in quella pagina. Ad esempio:

 
actions/ 
    Player.js 
    Episode.js 
    ... 

Sto facendo bene? Non ho trovato molte informazioni su di esso su Google, e quelli che ho trovato penso che siano limitati a piccoli progetti.

Grazie!

Answer 1

Negli esempi ufficiali abbiamo diverse directory di livello superiore:

• components per “dumb” Reagire componenti inconsapevoli di Redux;
• containers per "smart" Componenti di React collegati a Redux;
• actions per tutti i creatori di azioni, in cui il nome del file corrisponde a parte dell'app;
• reducers per tutti i riduttori, dove il nome del file corrisponde alla chiave di stato;
• store per l'inizializzazione del negozio.

Questo funziona bene per le app di piccole e medie dimensioni.

Quando si desidera unire più funzionalità correlate a gruppi e moduli, Ducks o other ways of grouping functionality by domain è un modo molto semplice per strutturare i moduli di Redux.

Infine, scegli la struttura che meglio si adatta alle tue esigenze.In nessun modo gli autori di Redux possono sapere cosa ti è più comodo di te.

Answer 2

Questa è più una domanda su best practice/stile codice e non c'è una risposta chiara. Tuttavia, nel progetto React redux boilerplate è stato proposto uno stile molto accurato. È molto simile a quello che hai attualmente.

./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 

Answer 3

io non hanno una forte opinione sulle directory dei componenti, ma mi piace mettere le azioni, le costanti e riduttori insieme:

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

ho alias state con con webpack così nei componenti contenitore che posso import {someActionCreator} from 'state/actions'; .

In questo modo, tutto il codice stateful nell'app si trova in un'unica posizione.

Si noti che reducers.js potrebbe essere suddiviso in più file semplicemente creando una directory reducers/ come actions/ e non si dovrà modificare alcuna istruzione di importazione.

Answer 4

Preferisco mantenere i componenti intelligenti e stupidi nello stesso file, ma utilizzare l'esportazione predefinita per il componente smart ed esportare per i componenti di presentazione/muti. In questo modo è possibile ridurre il rumore del file nella struttura della directory. Raggruppa anche i tuoi componenti per "Visualizza", ad esempio (Amministrazione => [admin.js, adminFoo.js, adminBar.js], Inventario => [inventory.js, inventoryFoo.js, inventoryBar.js], ecc.).

Answer 5

In Redux si dispone di un punto di ingresso per le azioni (azioni/cartella) e un punto di ingresso per i riduttori (riduttori/cartella).

Se si utilizza una struttura di codice basata su domini, si semplifica l'implementazione e la manutenzione di domini/funzioni ... d'altro canto si stanno complicando le dipendenze dei componenti e la manutenzione dello stato e della logica dell'app.

Dove mettere i componenti riutilizzabili? all'interno della cartella funzionalità/dominio? quindi se hai bisogno di un componente riutilizzabile da altre funzionalità/dominio devi creare una dipendenza tra domini? mmh non va bene per le app di grandi dimensioni!

Quando si devono combinare i riduttori, la struttura del codice dominio elimina ciò che precedentemente vi ha fornito.

Si stanno creando solo moduli di ridondanza singoli per ciascun dominio/funzione. La struttura del codice dominio dovrebbe essere valida in alcuni/molti casi, ma non è Redux.