gitpoint / gitpoint/git-point

Modify directory structure

Aperta
#506 4 commenti 3 reazioni 0 assegnatari Vedi su GitHub
discussion
Lingua principale
JavaScript
Stelle
4.8k
Fork
771
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

Our folder structure has changed as things have progressed and I'm thinking of another pattern we can start moving towards. I think having a folder structure for every component might be something we need to move towards. For example, our low level components in `components/`

```
- components/
- Button/
- button.component.js
- button.styled.js
// ...
```

And our container components (our "screens")

```
- screens/
- notifications/
- notifications.component.js
- notifications.styled.js
- notifications.container.js
- notifications.action.js
- notifications.reducer.js
- notifications.selector.js
- notifications.route.js
- notifications.type.js
- organization
// ...
```

With this pattern each of our components will be purely JSX renders that accept props. A container file like `notifications.container.js` will be something like the following:

```
import { compose } from 'recompose';
import { connect } from 'react-redux';
import { mapDispatchers } from 'utils';

import { Notification } from './notification.component';
import { notificationConnector } from './notification.selectors';

import { getUnreadNotifications } from './notification.actions';
import { getPendingNotifications } from './notification.actions';

const dispatchers = mapDispatchers({
getUnreadNotifications,
getPendingNotifications,
});

export const NotificationContainer = compose(
connect(notificationConnector, dispatchers),
)(Notification);
```

Keeping this logic separate from the actual component file means the actual notification component file does not represent any specific state logic. It just takes props, and the container is responsible for mapping those props to states and actions. In this example, also taking advantage of recompose. `mapDispatchers` can also be a utils method that leverages `bindActionCreators` from redux.

This is a pattern a lot of my colleagues here at work are using and I'm really starting to see the benefit. Will love to hear everyone's opinions 💬

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia esaminando le directory esistenti components/ e screens/, quindi confronta la loro organizzazione attuale con gli esempi proposti Button/ e notifications/. Traccia i punti di ingresso di notification component, container, actions, selectors, reducer e route per comprendere l'ambito. Il lavoro sarebbe considerato completato quando fosse stato concordato un modello di directory e fosse stata completata una migrazione, ma questa issue non definisce con precisione nessuno dei due.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, react, react-native, redux
Ambito
frontend, mobile
Tipo di issue
Refactoring
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
20/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.