gitpoint / gitpoint/git-point

Modify directory structure

Offen
#506 4 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
discussion
Vorherrschende Sprache
JavaScript
Sterne
4.8k
Forks
771
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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 💬

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der Prüfung der vorhandenen Verzeichnisse components/ und screens/ und vergleiche anschließend ihre aktuelle Organisation mit den vorgeschlagenen Beispielen Button/ und notifications/. Verfolge die Einstiegspunkte von notification component, container, actions, selectors, reducer und route, um den Umfang zu verstehen. Als abgeschlossen würde gelten, wenn ein einheitliches Verzeichnismuster vereinbart und eine vollständige Migration durchgeführt wurde, aber dieses Issue definiert keines von beidem präzise.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react, react-native, redux
Bereich
frontend, mobile
Issue-Typ
Refactoring
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
20/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.