Comment structurer Redux composants/conteneurs

Je suis en utilisant redux et je ne suis pas sûr de savoir comment organiser mes composants, je pense que le mieux est de les conserver dans des dossiers avec le nom de la composante principale comme le nom du dossier et de toutes les composantes internes à l'intérieur:

composants 
Commune/des choses comme des liens, en-tête de titres, etc 
Forme/boutons, entrées, etc 
Joueur/tous les petits composants formant le joueur 
index.js c'est le top de mise en page de la composante 
playBtn.js 
artistName.js 
songName.js 
Épisode/un autre composant

Puis, dans les conteneurs dossier, j'ai un conteneur par page, ce sont les seules que je suis en fait de la connexion à Redux:

conteneurs/
HomePageApp.js 
EpisodePageApp.js 
...

et puis les actions sont un pour chaque composant, au lieu d'une par page, donc dans le conteneur de page que je connecte à Redux je passe toutes les actions des composants utilisés dans la page. Par exemple:

actions/
Joueur.js 
L'épisode.js 
...

Je fais ce droit? Je n'ai pas trouvé beaucoup d'informations à ce sujet sur google, et ceux que j'ai trouvé je pense qu'ils sont limités à de petits projets.

Merci!

Jetez un oeil à cet article: jaysoo.ca/2016/02/28/...

InformationsquelleAutor Franco Risso | 2015-09-17

94

Officiel des exemples que nous avons plusieurs répertoires de niveau supérieur:
- components pour “muets” Réagir composants pas au courant de Redux;
- containers “smart” Réagir les composants connectés Redux;
- actions pour toute action de créateurs, d'où le nom de fichier correspond à la partie de l'application;
- reducers pour tous les réducteurs, où de nom de fichier correspond à l'état de la clé;
- store pour stocker de l'initialisation.
Cela fonctionne bien pour les petites et mid-niveau de la taille des applications.

Quand vous voulez aller plus modulaire et groupe fonctionnalités liées ensemble, Les canards ou d'autres moyens de fonctionnalités de regroupement par domaine est une belle alternative façon de structurer votre Redux modules.

Finalement choisir quelle que soit la structure qui fonctionne le mieux pour vous. Il n'existe aucun moyen Redux auteurs peuvent savoir ce qui est pratique pour vous, mieux que vous.
- J'ai trouvé le redux-forme est très pratique. Mais il se connecter avec l'état, ce répertoire vous pensez qu'elle devrait être.
- curieux de vos pensées sur ce projet de structure? Le container vs component la séparation des tâches n'était pas aussi clair pour moi au premier abord, mais la "hiérarchie" des conteneurs vs composants semble construit dans le nommage des fichiers.
- Je n'ai pas d'avis sur la structure :-). Utilisez ce qui fonctionne pour vous. Je ne suis pas la bonne personne à qui demander parce que je ne suis pas la création d'applications avec Redux.
- Bien, je vais choisir un style et de courir avec lui. Mais à l'avenir, nous avons besoin de votre avis sur tout...comment ce regard de chemise?
InformationsquelleAutor Dan Abramov

C'est plus une question sur les meilleures pratiques /style de code, et il n'y a pas de réponse claire. Cependant, une très soigné de style a été proposé dans le Réagir redux réutilisable projet. Il est très similaire à ce que vous avez actuellement.

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

InformationsquelleAutor Kloar

4

Je préfère le garder intelligent et stupide composants dans le même fichier, mais l'utilisation d'exportation par défaut pour les composants intelligents et de l'exportation aux fins de présentation/muet composants. De cette façon, vous pouvez réduire fichier de bruit dans votre structure de répertoire. Aussi un groupe de composants par "Vue", c'est à dire (Administration => [admin.js, adminFoo.js, adminBar.js], Inventaire => [inventory.js, inventoryFoo.js, inventoryBar.js], etc).
- j'aime cette idée.
InformationsquelleAutor dakt
1

Je n'ai pas d'opinion forte sur le composant de répertoires, mais j'aime mettre les actions, les constantes et les réducteurs d'ensemble:
```
state/
actions/
index.js
...
constants.js
reducers.js
```
Je alias state avec webpack ainsi, dans le conteneur de composants je peux import {someActionCreator} from 'state/actions';.

Cette manière, toute la dynamique de code dans l'application réside dans un seul endroit.

Noter que reducers.js pourrait être divisée en plusieurs fichiers simplement en faisant un reducers/ répertoire comme actions/ et vous ne voudriez pas avoir à changer toutes les déclarations d'importation.

InformationsquelleAutor w00t
0

Dans Redux vous avez un point d'entrée pour vos actions (actions/dossier) et un point d'entrée pour les réducteurs (réduction/dossier).

Si vous allez avec un domaine en fonction de la structure de code vous simplifier domaine/fonction de mise en œuvre et de la maintenance... de l'autre main vous sont compliquer dépendances de composants et de l'application de l'état/de la logique de l'entretien.

Où vas-tu mettre des composants réutilisables? à l'intérieur de fonction/domaine de dossier? donc, si vous avez besoin d'un composant réutilisable à partir d'une autre fonctionnalité de domaine, vous avez besoin de créer une dépendance entre les domaines? mmh pas si bon pour le grand app!

Lorsque vous devez combiner des réducteurs, domaine-code-structure prend de suite ce qu'il vous a donné précédemment.

Vous êtes seulement à la création d'unique redux modules pour chaque domaine/fonction.
domaine-code-structure devrait être bon dans certains de/la plupart des cas, mais ce n'est pas Redux.

InformationsquelleAutor luk_z
-1

J'ai un passe-partout à réagir, redux structure de dossier et il est utilisé pour de nombreux projets de l'entreprise. Vous pouvez le vérifier ici: https://github.com/nlt2390/le-react-redux-duck
- Les référentiels peuvent changer d'emplacement, la réponse à votre question va rester. Merci donc de résumer ce que vous avez fait dans votre projet pour faire de votre réponse plus utile. Voir aussi: meta.stackexchange.com/a/8259/266197
InformationsquelleAutor leLabrador

Vous devez vous connecter pour publier un commentaire.