Denominazione convenzione di eventi in redux js

Question

Redux sarà azioni di dispacciamento per cambio di stato. Quali sono le convenzioni di denominazione dei tipi di azione in redux?

Answer 1

Ci sono alcune convenzioni in tutto la comunità, ti elenco quelli che conosco di e pensare sono utili qui:

1. La convenzione più comune è quello mantenere i tipi di azione ("tipi di eventi ") in CONSTANT_CASE.

   Ciò evita errori di ortografia, dove l'azione ha un tipo di my_type, ma il riduttore si aspetta un tipo di my-type o My_Type.

2. Un'altra convenzione molto comune è quello di salvare i tipi di azione in un file separato come costanti, per esempio var MY_ACTION_TYPE = 'MY_ACTION_TYPE'; e usarli da lì.

   Questo evita anche errori di ortografia, quindi non ti aspetti che un'azione abbia un tipo di MY_ACTION_TYP. Se la variabile non esiste, riceverai immediatamente un errore, specialmente se stai leccando.

3. A non è così comune, ma imho molto utile, convenzione è quello di ambito le azioni ad un progetto e un dominio. Questo approccio è stato reso popolare da Erik Rasmussen nel suo "Ducks" proposal, che specifica che i tipi di azione devono essere in questa forma: var MY_ACTION_TYPE = 'appname/domain/MY_ACTIONTYPE'.

   Ciò evita il caso di due costanti di azioni aventi lo stesso valore. Per esempio. immagina di avere un'area di amministrazione e un'area di visualizzazione utente, ed entrambi hanno moduli che inviano un tipo di azione 'CHANGE_USERNAME'. Questo farà sì che due riduttori raccolgano la stessa azione, in cui uno non dovrebbe sollevare l'altro. Questo può accadere in caso di incidente ed è molto fastidioso rintracciare. Aggiungendo il prefisso all'app e al nome di dominio, si evita questo problema: 'appname/admin/CHANGE_USERNAME' è diverso da 'appname/user/CHANGE_USERNAME'!

Ecco tutte le convenzioni che conosco e utilizzo, ma sono sicuro che qualcun altro ha più - quello che hai utilizzato e trovato utile nei vostri progetti?

Answer 2

Esistono anche alcune convenzioni relative alla denominazione dei tipi di azione asincrona. Se si dispone di un insieme di azioni per rappresentare una chiamata API per ottenere un utente, è possibile dividere in qualcosa di simile:

• FETCH_USER_REQUEST - per quando si invia prima la chiamata API
• FETCH_USER_SUCCESS - per quando il chiamata API è fatto e con successo ha restituito dati
• FETCH_USER_FAIL - per quando la chiamata API non è riuscita e ha risposto con un errore,
• FETCH_USER_COMPLETE - a volte utilizzati alla fine della chiamata, indipendentemente dallo stato

Answer 3

C'è un nuovo modello che risolve questo problema, redux-auto.

Prende le idee della composizione del riduttore un passo avanti. Dove invece di avere un file che rappresenta il tuo riduttore e che crea funzioni di azioni individuali. approcci di

redux-auto di avere cartelle con i singoli file JS che rappresentano ogni azione/trasformazione dello stato e dinamicamente esporre questo come funzioni

esempio

└── store/ 
    ├──user/ 
    │ └── index.js 
    │ └── changeName.js 
    └──posts/ 
     └── index.js 
     └── delete.js 

Ora dal comunque nella vostra applicazione è possibile scrivere

import actions from 'redux-auto' 
... 
actions.user.changeName({name:"bob"}) 

negozio/utente/changeName.js

export default function (user, payload) { 
    return Object.assign({},user,{ name : payload.name }); 
} 

Questo è!

Se si desidera ascoltare le azioni di riduzione nei riduttori di terze parti. È possibile utilizzare come controllo di qualità allentato rispetto alla funzione.

action.type == actions.user.changeName // "USER/CHANGENAME" 

Per qualcosa di più avanzato si può anche vedere se l'azione è di proprietà di un riduttore specifica

// Returns true if it's an action specifically for user 
if(action.type in actions.user) 

Si può leggere di più sul project page