La idea de tener un orden en las carpetas siempre nos trae de cabeza, por ello propongo el uso de esta estructura en base a los diferentes proyectos que tenemos. Siempre que se pueda, la idea es que cada fichero tenga su .test y su index.js
Fichero/
index.js
Fichero.js
Fichero.test.js
De esta forma, podríamos tener cada uno de los con sus respectivos test y sus principales dependencias. Por ejemplo, si es un componente, que este tenga su .scss o su contenedor .container.js en caso de que se requiera conectar al redux.
Los nuevos containers serán componentes
Con esto, lo que conseguiremos, es separar el conectar con el redux en un HOC. Allí es dónde podemos tratar los datos que vienen del Redux en caso de ser necesario.
Fichero/
index.js
Fichero.js
Fichero.test.js
Fichero.scss
Fichero.container.js
Un ejemplo del fichero de container, puede ser:
import { connect } from 'react-redux';
import Fichero from './Fichero';
import { FicheroAction } from './store/actions/academy.actions';
const FicheroContainer = ({name, surname}) => {
const nameLowerCase = name.toLowerCase()
const surnameLowerCase = surname.toLowerCase()
return (
<Fichero
name={nameLowerCase}
surname={surnameLowerCase}
/>
)
}
const mapStateToProps = ({ data }) => {
const user = data.user ;
return user;
};
const mapDispatchToProps = dispatch => ({
getData: data => dispatch(FicheroAction(data)),
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(Fichero);
Esto nos permitiría conectar el componente y separar las props de redux, mientras que las otras props del componente estarían en el fichero del mismo. Ya que hemos tocado el tema de redux, la propuesta para la organización de las carpetas sería la siguiente:
Dado el caso de que todas las peticiones se hagan mediante las actions, es conveniente que se metan los servicios dentro de la carpeta store/ o redux/ quedando de esta forma:
store/
actions/
reducers/
services/
En caso de que se gestionen las peticiones dentro de redux, veo conveniente hacer una carpeta aparte para los services\, ya que en esta carpeta es donde se efectuarán las llamadas a las api's.
store/
actions/
reducers/
services/
user/
index.js
user.js
user.test.js
...
Tanto para los actions como para los reducers, sería recomendable tener la misma estructura de las carpetas
store/
actions/
user/
user.actions.js
user.actions.test.js
index.js
...
reducers/
user/
user.reducers.js
user.reducers.test.js
index.js
...
services/
user/
index.js
user.js
user.test.js
...
Estructura de las carpetas
La estructura planteada para las carpetas, sería algo como esto:
components/
Avatar/
index.js
Avatar.js
Avatar.test.js
Avatar.scss
login/
index.js
login.js
login.test.js
login.scss
login.container.js
Button/
index.js
Button.js
Button.test.js
Button.scss
...
config/
configureStore.js
i18n.js
icons.js
...
hooks/
useCallback/
index.js
useCallback.js
useCallback.test.js
useScroll/
index.js
useScroll.js
useScroll.test.js
...
routes/
index.js
routes.js
store/
actions/
user/
user.actions.js
user.actions.test.js
index.js
...
reducers/
user/
user.reducers.js
user.reducers.test.js
index.js
...
services/
user/
index.js
user.js
user.test.js
...
utils/
flatObject/
index.js
flatObject.js
flatObject.test.j
getLocation/
index.js
getLocation.js
getLocation.test.js
...
Teniendo en cuenta esto, las carpetas de containers o views dejarían de existir, pero nos surge una duda
¿cómo podemos evitar tener tanta lógica en los componentes de este tipo de componentes?
La respuesta es simple, separando más los componentes.
Para esto, propongo plantear la norma de una única responsabilidad. Es decir, tengo un componente que tiene que estar conectado a redux, tambien tiene que hacer llamadas a la api y debe tener lógica para que se pinte de una forma u otra.
Un caso de uso puede ser una lista, que dependiendo del tipo de usuario. se debe qué renderizar de una forma u otra y si se hace click en un elemento de la lista, debe hacer una request.
Para este caso, la estructura con su separación sería algo como:
components/
*** Conectamos el redux con las listas
Lists/
index.js
Lists.js
Lists.test.js
Lists.scss
Lists.container.js
*** La lista de tipo usuario
ListUser/
index.js
ListUser.js
ListUser.test.js
ListUser.scss
*** La lista de tipo admin
ListAdmin/
index.js
ListAdmin.js
ListAdmin.test.js
ListAdmin.scss
*** El ítem lista y sería en el que se haga la llamada a la api
ListItem/
index.js
ListItem.js
ListItem.test.js
ListItem.scss
...
Rutas relativas + nombresDeComponentesLargos
Esto hace que a veces, llegar a detectar en qué carpeta esta ese componente, sea caótico. Pero, ¿se pueden importar de rutas absolutas? La respuesta es SI gracias a jsconfig.json en la raíz del proyecto.
{
"compilerOptions": {
"baseUrl": ".",
}
}
Y, a partir de este momento, ya puedes importar tus componentes de manera absoluta
import Button from 'components/Button';
Top comments (0)