React-redux est une bonne chose. Lorsqu'elle est utilisée correctement, l'architecture de l'application est efficace et la structure du projet est facile à lire. Mais comme dans toute décision, il y a des particularités.
La description des actions et des réducteurs est l'une de ces fonctionnalités. L'implémentation classique de ces deux entités dans le code est une tâche plutôt longue.
La douleur de la mise en œuvre classique
Un exemple simple:
La sortie a 3 fichiers et au moins les problèmes suivants:
- "Bloat" le code en ajoutant simplement une nouvelle chaîne d'actions
- importation excessive de constantes d'action
- lecture des noms des constantes d'action (individuellement)
Optimisation
Cet exemple peut être amélioré avec des
redux-actions .
import { createActions, handleActions, combineActions } from 'redux-actions' export const actions = createActions({ popups: { open: { start: () => ({ loading: true }), pending: () => ({ loading: true }), fail: (error) => ({ loading: false, error }), success: (name, data) => ({ loading: false, name, data }), }, close: { start: () => ({ loading: true }), pending: () => ({ loading: true }), fail: (error) => ({ loading: false, error }), success: (name) => ({ loading: false, name }), }, }, }).popups const initialState = { opened: [] }; export const accountsReducer = handleActions({ [ combineActions( actions.open.start, actions.open.pending, actions.open.success, actions.open.fail, actions.close.start, actions.close.pending, actions.close.success, actions.close.fail ) ]: (state, { payload: { loading } }) => ({ ...state, loading }), [combineActions(actions.open.fail, actions.close.fail)]: (state, { payload: { error } }) => ({ ...state, error }), [actions.open.success]: (state, { payload: { name, data } }) => ({ ...state, error: null, opened: [ ...(state.opened || []).filter(x => x.name !== name), { name, data } ] }), [actions.close.success]: (state, { payload: { name } }) => ({ ...state, error: null, opened: [ ...state.opened.filter(x => x.name !== name) ] }) }, initialState)
Déjà beaucoup mieux, mais il n'y a pas de limite à la perfection.
Traitez la douleur
À la recherche d'une meilleure solution, je suis tombé sur un commentaire de
LestaD habr.com/en/post/350850/#comment_10706454 et
j'ai décidé d'essayer
redux-symbiote .
Cela a permis de supprimer les entités inutiles et de réduire la quantité de code.
L'exemple ci-dessus a commencé à ressembler à ceci:
Des pros, nous avons:- le tout dans un seul fichier
- moins de code
- représentation structurée des actions
Des inconvénients:- IDE n'offre pas toujours d'indices
- difficile de rechercher une action dans le code
- action difficile à renommer
Malgré les inconvénients, ce module est utilisé avec succès dans nos projets.
Merci à
LestaD pour le bon travail.