Comment diviser Redux actions en plusieurs fichiers

J'ai un dossier actions avec l'habitude types.js fichier pour mon type d'action, des constantes, en plus d'un index.js fichier est le suivant

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

et exporte également des fonctions pour toutes mes actions. Je me demandais, est il possible que je peux créer plusieurs fichiers pour définir mes actions index.js ne pas devenir trop long, puis les importer dans mon index.js donc, dans mes composants je peux toujours le faire par exemple import { loginUser } from '../../actions'; et ne pas avoir à se soucier du fichier de l'action en venir?

bien sûr, pourquoi pas? créer plusieurs fichiers, puis importer le contenu de ces fichiers dans celui-ci, puis sur exporter. ce qui est stoppin ya?

OriginalL'auteur Chris Tsongas | 2017-02-01

redux

45

En supposant que vous avez les éléments suivants structure de répertoire:
```
actions/
  index.js
  types.js
  ProductActions.js
```
À l'intérieur de votre actions/index.js, écrire:
```
export * from './ProductActions';
```
Puis définir ProductActions.js que quelque chose comme:
```
import axios from 'axios';
import { ... } from './types';

export const fetchProducts = () => { ... };
export const deleteProduct = () => { ... };
```
N'oubliez pas aussi de mettre à jour vos réducteurs avec les nouveaux types d'actions de fichiers:
```
import { ... } from '../actions/types'
```
Curieux de savoir si il y a un avantage à faire export const fetchProducts = () => { ... }; vs export function fetchProducts() { ... } en plus de se sentir comme un es6 hipster de cours?
vous pouvez utiliser l'un des deux. Personnellement, j'ai décidé de rester avec ES6 syntaxe, donc je n'ai pratiquement jamais écrire le mot-clé function plus. Mais juste pour faire une remarque, il y a des différences de périmètre entre l'aide de la fonction vs la flèche en fonction de la syntaxe. Essentiellement, le mot-clé ce aura un sens différent. Voir les articles de jsrocks.org/2014/10/arrow-functions-and-their-scope

OriginalL'auteur nbkhope
5

Dire, par exemple, nous avons deux actions de fichiers; actionsA et ActionsB.
Supposons que dans actionsA nous avons l'action suivante fonctions.
```
//actionsA

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

export function functionActionsA2(){ /* action body ActionsA2 */}
```
et dans actionsB nous avons le code suivant:
```
//actionsB

//You can import your actionTypes here

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

export function functionActionsB2(){ /* action body ActionsB2 */}
```
Dire que nous avons les actions d'un dossier contenant les deux fichiers; actionsA et actionsB, et un index.js fichier.
```
actions/
   index.js
   actionsA.js
   actionsB.js
```
Dans index.js fichier nous importons les différentes actions de actionsA et actionsB et exporte ensuite les fonctions importées.
```
//index.js
import {functionActionsA1, functionActionsA2 } from './actionsA'
import {functionActionsB1, functionActionsB2} from './actionsB'

export functionActionsA1
export functionActionsA2
export functionActionsB1
export functionActionsB2
```
Maintenant, vous pouvez simplement importer votre fichier d'index et d'obtenir les actions que vous souhaitez utiliser comme indiqué ci-dessous:
```
import {functionActionsA1,functionActionsB2} from '../../actions/index'
```
En tentant une solution de ce genre, j'ai eu une erreur d'analyse, en disant que j'avais besoin d'envelopper ce que j'ai a l'exportation (par exemple, functionActionsA1) dans {}. Ainsi, chaque ligne d'export au bas de votre index.js fichier devrait ressembler à export { functionActionsA1 }.
Dans cet exemple j'ai utilisé la ES6 syntaxe de l'exportation. Je suppose que vous utilisez ES5 c'est pourquoi vous rencontrez ce problème. Voir here
aussi à avoir ce problème (actions de fichiers trop "gros"); remise en question de moi-même si ce n'est pas un signe de mauvais motif. Opinion personnelle, mais l'importation pour réexportation, comme décrit ici, l'air tout à fait mauvais, en la comparant avec combineReducers qui est "splittable" par définition.Je ne sais toujours pas où la plupart de la logique devrait être fait (actions ou de réduction)
Je pense que ça se résume à votre préférence. Je suis un grand fan de l'utilisation de Thunks dans mon Redux actions, ce qui m'amène à la maison de la grande majorité de ma logique dans les actions. Chaque Redux-utilisateur qui j'ai interagi avec semblent suivre la même mentalité (garder la plupart de la logique dans les actions, et ont un plus petit, plus concis réducteurs). Découvrez ce discussion dans le Redux GitHub pour plus d'info
Thx pour le lien! Tout à fait le même, atteint le point où Object.assign({}, state, action.payload) est la seule chose que mon réducteurs.. windering sur ceux relevants. Encore, vous obtenez des tonnes de choses en actions, a été la recherche d'un moyen propre à les diviser

OriginalL'auteur cdaiga

Suivant l'exemple de cdaiga, je tiens à ajouter quelque chose ici,

//actionsA

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

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

et dans actionsB nous avons le code suivant:

//actionsB

//You can import your actionTypes here

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

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

Dire que nous avons les actions d'un dossier contenant les deux fichiers; actionsA et actionsB, et un index.js fichier.

actions/
   index.js
   actionsA.js
   actionsB.js

Dans index.js fichier nous importons les différentes actions de actionsA et actionsB et exporte ensuite les fonctions importées.

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

export {actionsA ,actionsB}

Maintenant, vous pouvez simplement importer votre fichier d'index et d'obtenir les actions que vous souhaitez utiliser comme indiqué ci-dessous:

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

l'utiliser comme - si vous souhaitez utiliser la méthode functionActionsA1

actionsA.functionActionsA1()

OriginalL'auteur vikasgupta

Vous devez vous connecter pour publier un commentaire.