La domanda:Redux: l'organizzazione di contenitori, componenti, azioni e riduttori
Qual è la migliore pratica più mantenibile e raccomandato per l'organizzazione di contenitori, componenti, azioni e riduttori in una grande React/Redux applicazione ?
La mia opinione:
tendenze attuali sembrano per organizzare collaterals Redux (azioni, riduttori, saghe ...) attorno al componente contenitore associato. per esempio.
/src
/components
/...
/contianers
/BookList
actions.js
constants.js
reducer.js
selectors.js
sagas.js
index.js
/BookSingle
actions.js
constants.js
reducer.js
selectors.js
sagas.js
index.js
app.js
routes.js
Questo funziona benissimo! Anche se sembra esserci un paio di problemi con questo design.
I problemi:
Quando abbiamo bisogno di accedere actions
, selectors
o sagas
da un altro contenitore sembra un anti-modello. Diciamo che abbiamo un contenitore globale /App
con un riduttore/stato che memorizza le informazioni che usiamo sull'intera app, come le categorie e le enumerabili. Dopo il precedente esempio, con un albero di Stato:
{
app: {
taxonomies: {
genres: [genre, genre, genre],
year: [year, year, year],
subject: [subject,subject,subject],
}
}
books: {
entities: {
books: [book, book, book, book],
chapters: [chapter, chapter, chapter],
authors: [author,author,author],
}
},
book: {
entities: {
book: book,
chapters: [chapter, chapter, chapter],
author: author,
}
},
}
Se vogliamo usare un selector
dal contenitore /App
all'interno della nostra /BookList
contenitore abbiamo bisogno per ricreare in /BookList/selectors.js
(sicuramente non va?) O importarlo da /App/selectors
(sarà sempre lo stesso selettore ESATTO ..? no.). Entrambe queste valutazioni mi sembrano sub-ottimali.
Il primo esempio di questo caso d'uso è l'autenticazione (ah ... auth noi amiamo odiare voi) in quanto è un modello comune "effetto collaterale" MOLTO. Spesso è necessario accedere a /Auth
sagas, azioni e selettori in tutta l'app. Potremmo avere i contenitori /PasswordRecover
, /PasswordReset
, /Login
, /Signup
.... In realtà nella nostra app il nostro contante /Auth
non ha alcun componente reale!
/src
/contianers
/Auth
actions.js
constants.js
reducer.js
selectors.js
sagas.js
Semplicemente contenente tutti i collaterali Redux per i vari e spesso non correlati contenitori di autorizzazione menzionati sopra.
Sono curioso, con la tua struttura attuale come stai usando il tuo selettore? Supponiamo che un componente usi le funzioni dei selettori di 'BookList', puoi mostrarmi la funzione' mapStateToProps'? stai passando lo 'stato' attraverso? o il 'state.booklist' – xiaofan2406