Quels pourraient être les inconvénients d'utiliser Redux au lieu de Flux?
Je viens de découvrir Redux . Tout a l'air bien. Existe-t-il des inconvénients, des pièges ou des compromis en utilisant Redux sur Flux? Merci
L'auteur Redux ici!
J'aimerais dire que vous allez faire les compromis suivants en l'utilisant:
Vous devrez apprendre à éviter les mutations. Flux n’est pas avisé de la mutation des données, mais Redux n’aime pas les mutations et de nombreux packages complémentaires de Redux vous supposent. ne jamais muter l'Etat. Vous pouvez appliquer cela avec des packages réservés aux dev, tels que redux-immutable-state-invariant , utilisez Immutable.js , ou faites confiance à votre équipe pour écrire du code non mutant, mais c'est quelque chose dont vous devez être conscient, et cela doit être une décision consciente acceptée par votre équipe.
Vous allez devoir choisir vos paquets avec soin. Alors que Flux n'essaye pas explicitement de résoudre les problèmes “à proximité” tels que annuler/redo , persistance , ou formes , Redux a des points d'extension tels que les middlewares et les optimiseurs de magasins, et il a engendré un écosystème jeune mais riche . Cela signifie que la plupart des paquets sont de nouvelles idées et n’ont pas encore reçu la masse critique d’utilisation. Vous pouvez compter sur quelque chose qui sera clairement une mauvaise idée quelques mois plus tard, mais c'est difficile à dire pour l'instant.
Vous n’avez pas encore d’intégration Nice Flow. Flux vous permet actuellement de faire des contrôles de type statiques très impressionnants qui Redux - ne supporte pas encore . Nous y arriverons, mais cela prendra du temps.
Je pense que le premier est le plus gros obstacle pour les débutants, le second peut être un problème pour les premiers adeptes trop enthousiastes, et le troisième est ma bête noire. En dehors de cela, je ne pense pas que l'utilisation de Redux apporte des inconvénients particuliers que Flux évite, et certaines personnes disent qu'il présente même des avantages par rapport à Flux.
Voir aussi ma réponse sur avantages de l’utilisation de Redux .
Redux et Flux nécessitent tous deux une quantité considérable de code passe-partout pour couvrir de nombreux modèles courants, en particulier ceux qui impliquent l'extraction de données asynchrone. La documentation Redux contient déjà une poignée d'exemples de réduction du passe-partout: http://redux.js.org/docs/recipes/ReducingBoilerplate.html . Vous pouvez obtenir tout ce dont vous pourriez avoir besoin dans une bibliothèque Flux telle que Alt ou Fluxxor, mais Redux préfère la liberté aux fonctionnalités. Cela pourrait être un inconvénient pour certains développeurs car Redux émet certaines hypothèses sur votre état qui pourraient être ignorées par inadvertance.
La seule façon pour vous de vraiment répondre à votre question est d’essayer Redux si vous le pouvez, éventuellement dans le cadre d’un projet personnel. Redux est né de la nécessité d'améliorer l'expérience des développeurs et de favoriser la programmation fonctionnelle. Si vous n'êtes pas familiarisé avec les concepts fonctionnels tels que les réducteurs et la composition des fonctions, vous pouvez être ralenti, mais légèrement. L'avantage d'adopter ces idées dans le flux de données est de faciliter les tests et la prévisibilité.
Avertissement: j'ai migré de Flummox (une implémentation populaire de Flux) vers Redux et les avantages supérieurs l'emportent largement sur les inconvénients. Je préfère beaucoup moins de magie dans mon code. Moins de magie coûte un peu plus, mais c'est un très petit prix à payer.
L'un des principaux avantages de l'utilisation de Redux par rapport aux autres alternatives de Flux est sa capacité à réorienter votre réflexion vers une approche plus fonctionnelle. Une fois que vous comprenez comment tous les fils se connectent, vous réalisez son élégance stupéfiante et sa simplicité de conception, et vous ne pouvez plus revenir en arrière.
Je préfère utiliser Redux car il utilise un magasin, ce qui facilite beaucoup la gestion des états par rapport à Flux , aussi Redux DevTools est un outil vraiment utile qui vous permet de voir ce que vous faites avec votre état avec des données utiles et qui est vraiment en ligne avec React outils de développement.
De plus Redux a plus de souplesse d'utilisation avec d'autres frameworks populaires comme Angular . Quoi qu'il en soit, voyons comment Redux se présente comme un framework.
Redux a trois principes qui peuvent très bien introduire Redux et qui constituent également la principale différence entre Redux et Flux.
Source unique de vérité
L'état de votre application entière est stocké dans une arborescence d'objets au sein d'un magasin unique.
Cela facilite la création d'applications universelles, car l'état de votre serveur peut être sérialisé et hydraté dans le client sans effort de codage supplémentaire. Un seul arbre d'état facilite également le débogage ou l'inspection d'une application; cela vous permet également de maintenir l'état de votre application en développement, pour un cycle de développement plus rapide. Certaines fonctionnalités traditionnellement difficiles à implémenter - Annuler/Répéter, par exemple - peuvent soudainement devenir triviales à implémenter si tout votre état est stocké dans une seule arborescence.
console.log(store.getState())
/* Prints
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
},
{
text: 'Keep all state in a single tree',
completed: false
}
]
}
*/
L'état est en lecture seule
La seule façon de changer d'état est d'émettre une action, un objet décrivant ce qui s'est passé.
Cela garantit que ni les vues ni les rappels réseau n'écriront jamais directement dans l'état. Au lieu de cela, ils expriment une intention de transformer l'État. Parce que tous les changements sont centralisés et se produisent les uns après les autres dans un ordre strict, il n’ya pas de conditions de course subtiles à surveiller. Comme les actions ne sont que de simples objets, elles peuvent être consignées, sérialisées, stockées puis réexécutées à des fins de débogage ou de test.
store.dispatch({
type: 'COMPLETE_TODO',
index: 1
})
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
})
Les modifications sont effectuées avec des fonctions pures
Pour spécifier comment l’arbre d’état est transformé en actions, vous écrivez des réducteurs purs.
Les réducteurs ne sont que des fonctions pures qui prennent l'état précédent et une action et retournent l'état suivant. N'oubliez pas de renvoyer de nouveaux objets d'état au lieu de transformer l'état précédent. Vous pouvez commencer avec un seul réducteur et, à mesure que votre application grandit, divisez-la en de plus petits réducteurs qui gèrent des parties spécifiques de l'arborescence de l'état. Les réducteurs n'étant que des fonctions, vous pouvez contrôler l'ordre dans lequel ils sont appelés, transmettre des données supplémentaires ou même créer des réducteurs réutilisables pour des tâches courantes telles que la pagination.
function visibilityFilter(state = 'SHOW_ALL', action) {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
text: action.text,
completed: false
}
]
case 'COMPLETE_TODO':
return state.map((todo, index) => {
if (index === action.index) {
return Object.assign({}, todo, {
completed: true
})
}
return todo
})
default:
return state
}
}
import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)
pour plus d'informations visitez ici
Les redux exigent de la discipline en matière d'immutabilité. Quelque chose que je peux recommander est ng-freeze pour vous informer de toute mutation accidentelle d'état.