Comment comprendre le redux

Principe de Redux

Une entreprise a trois métiers : la logistique (actionType), le e-commerce (actionType) et la publicité ( actionType), les fonds gagnés par les trois entreprises sont uniformément enregistrés dans le système financier (état) de l'entreprise. Un jour, l'entreprise de commerce électronique a vendu des biens (actions) d'une valeur d'un million sur la plateforme de commerce électronique de l'entreprise. Les fonds gagnés ont été envoyés au service financier de l'entreprise sous forme de factures (envoi). Le service financier a calculé les revenus. ses propres blocs d'affaires. Le bénéfice obtenu (réducteur) est ensuite mis à jour dans le système financier (état).

Principe de base : via une action événementielle, les résultats sont envoyés au réducteur via dispatch. Dans le réducteur, différents processus métier sont exécutés sur les données en fonction de différents types d'action, puis les résultats finaux sont mis à jour dans le réducteur. arbre d'état.

Comme plusieurs de mes patrons surveillent de près les fonds de l'entreprise et doivent toujours faire attention aux changements de fonds, ils ont mis en place un événement (s'abonner) pour envoyer un SMS pour les avertir (auditeur) lorsqu'il y a est un changement de fonds.

Principe : Redux dispose d'un tableau d'écouteurs intégré qui permet un abonnement externe aux événements de changement de données d'état. Lorsque les données de l'arborescence d'état changent, tous les événements d'écoute seront notifiés.

　Explication de l'API

function createStore(reducer, preloadedState, enhancer)

　Dans la méthode createStore, l'ensemble de l'environnement redux est initialisé. preloadedState sert de valeur initiale de l'arborescence d'état. Cette méthode renvoie l'interface ouverte de redux, et l'état de redux ne peut être exploité que via l'API renvoyée.

CreateStore renvoie l'API renvoyée :

 return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }

store.getState : renvoie l'objet d'état actuellement maintenu par

store ; .subscribe : vous pouvez enregistrer des événements d'abonnement via cette interface, c'est-à-dire que lorsque l'on accède à l'état de redux (que les données de l'état soient modifiées ou non), redux traversera tous les événements enregistrés.

function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected listener to be a function.')
    }

    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
  }

store.dispatch : une fois l'action d'événement exécutée, transmettez les résultats au réducteur via la répartition. Le résultat de l'action doit être un objet js ordinaire et doit contenir un attribut de type dans le réducteur, les données peuvent être traitées différemment en fonction du type, puis mises à jour vers l'état correspondant.

Après le réducteur, tous les événements d'écoute seront parcourus, que les données aient changé ou non.

function dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
        'Use custom middleware for async actions.'
      )
    }

    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
        'Have you misspelled a constant?'
      )
    }

    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    const listeners = currentListeners = nextListeners
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }

L'ensemble de l'application monopage n'a besoin d'appeler la méthode createStore qu'une seule fois, puis de s'assurer que l'objet initialisé est globalement disponible, afin d'obtenir une gestion unifiée des données via redux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!