En JavaScript, la gestion des états est un sujet de discussion de nos jours. Lorsqu'il s'agit d'implémenter la gestion des états, les développeurs ont souvent du mal à gérer le code standard dans Redux. Par conséquent, MobX s'est avéré être une bonne alternative à Redux qui offre la même fonctionnalité avec moins de code à écrire. Cependant, les deux outils de gestion des états fonctionnent bien avec React.
Voyons d'abord les choses communes entre les deux:1) Les deux prennent en charge le débogage de voyage dans le temps
2) Les deux contiennent des bibliothèques open-source
3) Les deux fournissent une gestion des états côté client
4) Les deux fournissent un support énorme pour les frameworks natifs React
Dans ce blog, nous avons répertorié tous les avantages et les inconvénients des deux solutions de gestion de l'État. Il aidera
les développeurs Web à choisir le meilleur pour leur prochain projet. Avant d'en discuter, nous avons comparé Redux et Mobx en fonction de certains paramètres, comme indiqué ci-dessous:
-> Maintenance et évolutif
En raison de la présence de fonctions pures et d'un paradigme de programmation fonctionnelle, Redux est plus évolutif et maintenable. Par conséquent, les choses peuvent être facilement contrôlées avec Redux.
-> Processus de débogage
Le débogage dans Redux est une bonne expérience par rapport à MobX car il fournit des outils de développement impressionnants et est livré avec moins d'abstraction. Avec le paradigme du flux, le Redux devient plus prévisible. D'un autre côté, en raison de plus d'abstraction et d'outils de développement moyens, le débogage dans MobX est beaucoup plus difficile.
-> Courbe d'apprentissage
Pour apprendre MobX est facile car il est livré avec une courbe d'apprentissage régulière. La présence d'une abstraction maximale facilite l'apprentissage et les développeurs JavaScript familiers avec les concepts de POO ont un bastion sur MobX. D'un autre côté, Redux utilise un paradigme de programmation fonctionnelle qui le rend difficile à saisir immédiatement.
-> Communauté
Redux a une large base communautaire par rapport à MobX. Par conséquent, Redux fournit un excellent support communautaire aux développeurs à tout moment et en tout lieu.
-> Impur vs pur
MobX est impur car les états peuvent être écrasés. Ici, vous pouvez facilement mettre à jour les états avec les nouvelles valeurs. Cependant, Redux est pur car il utilise des fonctions pures. Ici, les états sont en lecture seule et ne peuvent pas être écrasés directement. L'état précédent est remplacé par un nouvel état.
-> Données observables vs données simples
MobX utilise un observable pour stocker tandis que Redux utilise des données Javascript normales pour stocker les valeurs. Dans Redux, toutes les mises à jour sont suivies manuellement.
-> Boutique
Un magasin est quelque chose où les données sont placées. MobX possède plusieurs magasins où ces magasins sont logiquement séparés. D'un autre côté, Redux a un grand magasin où tous les états sont stockés. Les données sont généralement normalisées dans Redux et les données sont conservées dénormalisées dans MobX.
Redux vs MobX: la comparaison de codeInjection d'accessoiresLa fonction connect () de React-redux est utilisée pour passer l'état et les actions aux accessoires dans Redux. Il est illustré ci-dessous:
// accès aux accessoires
<ContactForm contact={this.props.contact} loading={this.props.loading} onSubmit={this.submit} />
// fonction pour injecter l'état dans les accessoires
function mapStateToProps(state) { return { contact: state.contactStore.contact, errors: state.contactStore.errors } }
// injecter à la fois l'état et les actions dans les accessoires
export default connect(mapStateToProps, { newContact, saveContact, fetchContact, updateContact })(ContactFormPage);
Dans MobX, inject est utilisé pour injecter la collection des magasins. Cela rendra les magasins disponibles dans les accessoires. Ici, l'état et les actions sont accessibles via les propriétés de l'objet magasin, donc pas besoin de les passer séparément.
@inject("stores") @observer // injecting store into props class ContactFormPage extends Component { … // accessing store via props const { contactStore:store } = this.props.stores; return ( <ContactForm store={store} form={this.form} contact={store.entity} /> ) … }
Par conséquent, nous avons utilisé des décorateurs redux-connect pour simplifier le code Redux et la version MobX est toujours facile à lire. Par conséquent, aucun gagnant clair.
BootstrappingDans Redux, définissez d'abord le magasin et l'application est transmise via le fournisseur. Pour gérer les fonctions asynchrones, vous devez également définir redux-thunk et redux-promise-middleware. Après cela, l'extension redux-devtools permet le débogage du magasin en mode de voyage dans le temps.
import { applyMiddleware, createStore } from "redux"; import thunk from "redux-thunk"; import promise from "redux-promise-middleware"; import { composeWithDevTools } from 'redux-devtools-extension'; import rootReducer from "./reducers"; const middleware = composeWithDevTools(applyMiddleware(promise(), thunk)); export default createStore(rootReducer, middleware);
// src / index.js
ReactDOM.render( <BrowserRouter> <Provider store={store}> <App /> </Provider> </BrowserRouter>, document.getElementById('root') );
Dans MobX, plusieurs magasins sont configurés. Il n'a pas besoin de bibliothèques externes pour gérer les actions asynchrones mais seulement quelques lignes de code. Vous avez besoin du mobx-remotedev pour connecter l'outil de débogage redux-devtools-extension.
import remotedev from 'mobx-remotedev'; import Store from './store'; const contactConfig = { name:'Contact Store', global: true, onlyActions:true, filters: { whitelist: /fetch|update|create|Event|entity|entities|handleErrors/ } }; const contactStore = new Store('api/contacts'); const allStores = { contactStore: remotedev(contactStore, contactConfig) }; export default allStores;
// src / index.js
ReactDOM.render( <BrowserRouter> <Provider stores={allStores}> <App /> </Provider> </BrowserRouter>, document.getElementById('root') );
La quantité de code utilisée dans les deux est cependant la même. Mais, MobX contient moins d'instructions d'importation.
Définir les actions et les réducteursLes actions et les réducteurs sont définis dans Redux par le code suivant:
// actions
export function fetchContacts(){ return dispatch => { dispatch({ type: 'FETCH_CONTACTS', payload: client.get(url) }) } }
// réducteurs
switch (action.type) { case 'FETCH_CONTACTS_FULFILLED': { return { ...state, contacts: action.payload.data.data || action.payload.data, loading: false, errors: {} } } case 'FETCH_CONTACTS_PENDING': { return { ...state, loading: true, errors: {} } } case 'FETCH_CONTACTS_REJECTED': { return { ...state, loading: false, errors: { global: action.payload.message } } } }
La logique d'action et de réduction se fait dans une classe dans MobX. Il utilise la POO en raison de laquelle la classe Store est refactorisée pour créer plusieurs magasins à l'aide du constructeur de classe. Le code respectif est indiqué ci-dessous:
@action fetchAll = async() => { this.loading = true; this.errors = {}; try { const response = await this.service.find({}) runInAction('entities fetched', () => { this.entities = response.data; this.loading = false; }); } catch(err) { this.handleErrors(err); } }
Ainsi, nous avons vu que la logique définie dans les deux solutions de gestion d'état fait le même travail. La seule différence est que nous avons utilisé 33 lignes de code dans Redux et 14 lignes de code dans MobX pour obtenir le résultat. Par conséquent, vous pouvez créer des applications plus rapidement avec MobX.
Pourquoi utiliser MobX pour les applications React?MobX est une bibliothèque testée qui rend la gestion des états simple et évolutive en appliquant de façon transparente la programmation réactive fonctionnelle (TFRP). React et MobX sont une combinaison puissante ensemble.
- Moins de code à écrire
- Facile à apprendre
- Les données imbriquées sont faciles
- Prise en charge de la programmation orientée objet
Pourquoi ne pas utiliser MobX?- Difficile à déboguer
- Meilleures alternatives présentes
- Donne trop de liberté
Pourquoi utiliser les applications Redux for React?Redux est une bibliothèque autonome qui peut être utilisée avec le cadre d'interface utilisateur, y compris Angular, Vue, Ember, React & vanilla JS.
- Extensibilité via des middlewares
- Popularité et communauté
- Support d'outillage
- Prévisibilité et simplicité
- Flux de données unidirectionnel et immuabilité
- Séparation des données et présentation
Pourquoi ne pas utiliser Redux?- Boilerplate (réducteurs, sélecteurs, vues, types d'actions, créateurs d'actions, ...)
- Les actions sont déconnectées de leur effet (comme défini dans le réducteur)
- Pas de solution prête à l'emploi pour gérer les effets secondaires (disponible via des middlewares tels que redux-thunk ou redux-saga)
Note finale:Maintenant, vous pouvez voir que la base de code MobX est beaucoup plus agile. En utilisant le style POO et les bonnes pratiques de développement, vous pouvez rapidement créer des applications React. Le principal inconvénient est qu'il est très facile d'écrire du code médiocre et impossible à maintenir.
D'un autre côté, Redux est populaire et convient pour la construction de grands projets complexes. Il s'agit d'un cadre strict avec des garanties qui garantit que chaque développeur écrit du code facile à tester et à maintenir. Cependant, il ne convient pas aux petits projets.
J'espère avoir fourni suffisamment d'informations pour clarifier s'il faut migrer vers MobX ou continuer avec Redux. En fin de compte, la décision dépend du type de projet sur lequel vous travaillez et des ressources dont vous disposez.