Wie teilt Redux Aktionen, die in mehrere Dateien

Habe ich einen Ordner "Aktionen" mit den üblichen types.js die Datei für mein handeln geben Konstanten, plus ein index.js Datei, die die folgenden

import axios from 'axios';
import { browserHistory } from 'react-router';
import {
  AUTH_USER,
  UNAUTH_USER,
  AUTH_ERROR,
  FETCH_MESSAGE
} from './types';

und auch Export-Funktionen für alle meine Handlungen. Ich Frage mich, gibt es eine Möglichkeit, die ich erstellen kann der mehrere Dateien für die Definition der meine Aktionen so index.js nicht zu lange werden, dann importieren Sie diese in mein index.js also in meinen Komponenten kann ich nur noch tun, zum Beispiel import { loginUser } from '../../actions'; und keine sorgen darüber machen müssen, welche Datei die Aktion herkommen?

sicher, warum nicht? erstellen Sie mehrere Dateien, und importieren Sie dann die Inhalte dieser Dateien in diesem einen, dann exportieren. was ist ya stoppin?

InformationsquelleAutor Chris Tsongas | 2017-02-01

redux

46

Vorausgesetzt, Sie haben die folgenden directory-Struktur:
```
actions/
  index.js
  types.js
  ProductActions.js
```
In Ihrem actions/index.js, schreiben:
```
export * from './ProductActions';
```
Dann definieren ProductActions.js so etwas wie:
```
import axios from 'axios';
import { ... } from './types';

export const fetchProducts = () => { ... };
export const deleteProduct = () => { ... };
```
Denken Sie daran, auch aktualisieren Sie Ihre Reduzierstücke mit dem neuen action-Typen Datei:
```
import { ... } from '../actions/types'
```
- Neugierig, ob es von Vorteil ist zu tun export const fetchProducts = () => { ... }; vs export function fetchProducts() { ... } neben Gefühl, wie ein es6 hipster natürlich?
- Sie können entweder eine. Ich persönlich habe beschlossen, stick mit ES6-syntax, so dass ich kaum schreiben das Schlüsselwort "function" nicht mehr. Aber nur eine Notiz machen, gibt es Unterschiede im Bereich zwischen über die Funktion vs, die Pfeil-Funktion-syntax. Im wesentlichen, das Schlüsselwort das haben eine andere Bedeutung. Siehe Artikel wie jsrocks.org/2014/10/arrow-functions-and-their-scope
InformationsquelleAutor nbkhope
5

Sagen, zum Beispiel haben wir zwei Aktionen-Dateien; actionsA und ActionsB.
Angenommen, in actionsA wir haben die folgenden Aktion-Funktionen.
```
//actionsA

//You can import your actionTypes here
export function functionActionsA1(){ /* action body ActionsA1 */}

export function functionActionsA2(){ /* action body ActionsA2 */}
```
und in actionsB haben wir den folgenden code:
```
//actionsB

//You can import your actionTypes here

export function functionActionsB1(){ /* action body ActionsB1 */}

export function functionActionsB2(){ /* action body ActionsB2 */}
```
Sagen, wir haben ein Ordner-Aktionen enthält zwei Dateien; actionsA und actionsB, und eine index.js Datei.
```
actions/
   index.js
   actionsA.js
   actionsB.js
```
In index.js Datei importieren wir die verschiedenen Aktionen von actionsA und actionsB und exportiert dann die importierten Funktionen.
```
//index.js
import {functionActionsA1, functionActionsA2 } from './actionsA'
import {functionActionsB1, functionActionsB2} from './actionsB'

export functionActionsA1
export functionActionsA2
export functionActionsB1
export functionActionsB2
```
Nun können Sie einfach importieren Sie Ihre index-Datei und Holen Sie sich die Aktionen, die Sie verwenden möchten, wie unten gezeigt:
```
import {functionActionsA1,functionActionsB2} from '../../actions/index'
```
- Bei dem Versuch eine Lösung wie diese, bekam ich einen parsing-Fehler ausgegeben, der besagt, dass ich brauchte, um zu wickeln, was ich war, zu exportieren (z.B. functionActionsA1) in {}. Also, jede export-Zeile am unteren Rand Ihres index.js die Datei sollte Aussehen wie export { functionActionsA1 }.
- In diesem Beispiel habe ich die ES6 synthax exportieren. Ich glaube, dass Sie mit ES5, dass ist der Grund, warum du bist mit diesem Problem. Siehe here
- auch mit diesem problem (Aktionen, die Dateien immer zu 'groß'); Frage mich, ob dies nicht ein Zeichen des schlechten Muster. Persönliche Meinung, aber-import re-export, wie hier beschrieben, sehen sehr schlecht, vergleicht man es mit combineReducers die 'teilbare' per definition.Ich bin immer noch unsicher, wo die meisten der Logik getan werden sollte (Aktionen oder Reduzierungen)
- Ich denke, dass es wirklich läuft darauf hinaus, Ihren wünschen. Ich bin ein großer fan der Verwendung von Thunks in meinem Redux Aktionen, das führt mich zu Haus die große Mehrheit meiner Logik in den Aktionen. Alle Redux-Benutzer, ich habe in Wechselwirkung mit der zu Folgen scheinen der gleichen Mentalität (halten die meisten Logik in den Aktionen, und kleinere, präziser Reduzierstücke). Check out this Diskussion in der Redux GitHub für mehr Infos
- Thx für den link! So ziemlich dasselbe, den Punkt erreicht, wo Object.assign({}, state, action.payload) ist das einzige, was meine Reduzierstücke.. windering über die relevants. Weiterhin erhalten Sie viele Dinge in Taten, war auf der Suche für eine saubere Weg, um Sie zu Spalten
InformationsquelleAutor cdaiga

Folgenden am Beispiel der cdaiga, möchte ich hinzufügen, dass hier etwas

//actionsA

//You can import your actionTypes here
export function functionActionsA1(){ /* action body ActionsA1 */}

export function functionActionsA2(){ /* action body ActionsA2 */}

und in actionsB haben wir den folgenden code:

//actionsB

//You can import your actionTypes here

export function functionActionsB1(){ /* action body ActionsB1 */}

export function functionActionsB2(){ /* action body ActionsB2 */}

Sagen, wir haben ein Ordner-Aktionen enthält zwei Dateien; actionsA und actionsB, und eine index.js Datei.

actions/
   index.js
   actionsA.js
   actionsB.js

In index.js Datei importieren wir die verschiedenen Aktionen von actionsA und actionsB und exportiert dann die importierten Funktionen.

//index.js
import * as actionsA from './actionsA'
import * as actionsB from './actionsB'

export {actionsA ,actionsB}

Nun können Sie einfach importieren Sie Ihre index-Datei und Holen Sie sich die Aktionen, die Sie verwenden möchten, wie unten gezeigt:

import {actionsA} from '../../actions/index';

verwenden Sie es als - wenn Sie möchten, verwenden Sie Methode functionActionsA1

actionsA.functionActionsA1()

InformationsquelleAutor vikasgupta

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.