javascript - español - reactjs redux

Cómo estructurar los componentes/contenedores de Redux (5)

Estoy usando redux y no estoy seguro de cómo organizar mis componentes, creo que lo mejor es mantenerlos en carpetas con el nombre del componente principal como el nombre de la carpeta y todos los componentes internos en el interior:

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

Luego, en la carpeta de contenedores, tengo un contenedor por página, que son los únicos que realmente conecto a Redux:

containers/ HomePageApp.js EpisodePageApp.js ...

y luego las acciones son una por cada componente superior, en lugar de una por página, por lo que en el contenedor de la página que conecto a Redux paso todas las acciones de los componentes utilizados en esa página. Por ejemplo:

actions/ Player.js Episode.js ...

¿Lo estoy haciendo bien? No he encontrado mucha información sobre googlear, y los que he encontrado creo que están limitados a pequeños proyectos.

¡Gracias!

En Redux tiene un punto de entrada para sus acciones (acciones / carpeta) y un punto de entrada para los reductores (reductores / carpeta).

Si utiliza la estructura de código basada en el dominio, simplifica la implementación y el mantenimiento del dominio / función ... por otro lado, está complicando las dependencias de los componentes y el mantenimiento del estado / lógica de la aplicación.

¿Dónde vas a poner componentes reutilizables? dentro de la carpeta característica / dominio? Entonces, si necesita un componente reutilizable de otra característica / dominio, ¿necesita crear una dependencia entre dominios? mmh no es tan bueno para una gran aplicación!

Cuando tiene que combinar reductores, domain-code-structure quita lo que le dio anteriormente.

Solo está creando módulos reducidos individuales para cada dominio / función. domain-code-structure debería ser bueno en algunos / la mayoría de los casos, pero esto no es Redux.

En los ejemplos oficiales tenemos varios directorios de nivel superior:

components para components React “dumb” que desconocen Redux;
containers para componentes React "inteligentes" conectados a Redux;
actions para todos los creadores de acciones, donde el nombre del archivo corresponde a una parte de la aplicación;
reducers para todos los reductores, donde el nombre del archivo corresponde a la clave de estado;
store para la inicialización de la tienda.

Esto funciona bien para aplicaciones de tamaño pequeño y mediano.

Cuando desee ir más modular y agrupar la funcionalidad relacionada, los Ducks u otras formas de agrupar la funcionalidad por dominio es una buena manera alternativa de estructurar sus módulos de Redux.

Finalmente elija la estructura que mejor funcione para usted. No hay forma de que los autores de Redux puedan saber qué es conveniente para usted mejor que usted.

Esta es más una pregunta sobre mejores prácticas / estilo de código, y no hay una respuesta clara. Sin embargo, se propuso un estilo muy limpio en el proyecto repetitivo React redux . Es muy similar a lo que tienes actualmente.

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

No tengo una opinión fuerte sobre los directorios de componentes, pero me gusta poner las acciones, constantes y reductores juntos:

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

Alias state con con el paquete web así que en los componentes del contenedor puedo import {someActionCreator} from ''state/actions''; .

De esta manera, todo el código de estado en la aplicación reside en un solo lugar.

Tenga en cuenta que reducers.js se puede dividir en varios archivos simplemente haciendo un directorio de reducers/ como actions/ y no tendría que cambiar ninguna instrucción de importación.

Prefiero mantener los componentes inteligentes y tontos en el mismo archivo, pero use la exportación predeterminada para el componente inteligente y la exportación para los componentes de presentación / mudos. De esta forma puede reducir el ruido de archivos en la estructura de su directorio. También agrupe sus componentes por "Ver", es decir (Administración => [admin.js, adminFoo.js, adminBar.js], Inventario => [inventory.js, inventoryFoo.js, inventoryBar.js], etc.).