Pourquoi Redux de l'état des fonctions appelées réducteurs?

Si l'on considère la série d'actions dans votre application d'être comme une liste, ou peut-être plus comme un ruisseau, il pourrait faire plus de sens.

Prendre cet exemple artificiel:

['apple', 'banana', 'cherry'].reduce((acc, item) => acc + item.length, 0)

Le premier argument est une fonction de la forme (Int, String) => Int. Avec une valeur initiale, vous passez reduce ce qui pourrait être appelé un "réducteur de la fonction", et vous obtenez le résultat de la transformation de la série d'éléments. Donc, vous pourriez dire, le réducteur de la fonction décrit ce qui est fait avec chaque élément individuel de changer le résultat. En d'autres termes, le réducteur de fonction prend déjà de sortie et de la valeur suivante, et il calcule la prochaine sortie.

C'est analogue à ce qu'est un Redux réducteur: il prend de l'état précédent et de l'action en cours, et calculer l'état suivant.

Dans le vrai style de programmation fonctionnelle, vous pouvez conceptuellement effacer le sens appliqué aux arguments et le résultat, et de se concentrer sur la "forme" de l'entrée et de sortie.

Dans la pratique, Redux réducteurs sont généralement orthogonale, dans le sens que pour une action donnée, ils ne sont pas tous apporter des modifications à les mêmes propriétés, ce qui le rend facile de diviser leurs responsabilités et de les agréger la sortie avec combineReducers.

La raison pour laquelle un redux réducteur est appelé un reducer est parce que vous pourrait "réduire" un collection of actions et un initial state (du magasin) pour effectuer ces actions pour récupérer la final state.

Comment? Pour répondre à cette question, permettez-moi de définir un réducteur de nouveau:

La réduire() méthode s'applique à un function (reducer) contre un accumulator et chaque
la valeur de la matrice (de gauche à droite) pour le réduire à un seul
valeur.

Et ce n'est un redux réducteur faire?

Le réducteur est un pur function que prend l'état actuel et un
de l'action, et retourne à l'état suivant. Notez que l'état est accumulated que chaque action sur la collecte est appliquée pour changer cet état.

Donc donné un collection of actions, le réducteur est appliqué sur chaque valeur de la collection (de gauche à droite). La première fois, il retourne la initial value. Maintenant, le réducteur est appliqué à nouveau sur l'état initial et la première action de retour à l'état suivant. Et le prochain élément de la collection (action) est appliqué à chaque fois sur le current state pour obtenir le next state jusqu'à ce qu'il atteint la fin du tableau. Et puis, vous obtenez the final state. C'est pas cool ça!

Nous savons où les Réducteurs sont à venir à partir de (programmation fonctionnelle), et pourquoi ils peuvent être considérés comme faisant de la réduction de travail (réduction de l'apport en azote, éléments pour une seule valeur de retour - qui est exactement ce que les fonctions normales sont supposted faire).
Cependant: Le nom est juste un nom, comme la rose est le nom d'une rose. Ne pense pas trop. Redux progammers sont les gens, ils sont enfermés dans leur contexte et là il fait sens. Le reste d'entre nous ont à accepter l'inventeur du droit d'appeler un chien bleu jaune chat 😉

Je n'arrive pas à voir comment un Redux réducteur directement mappée à la fonction que vous utilisez avec reduce, voici donc quelques exemples pour voir comment ils correspondent.

D'abord un standard réducteur (appelé "accumulateur" dans MDN) fonction de la MDN Tableau.réduire documentation et puis un exemple simplifié de Dan Abramov est Counter.js à la fin de sa "Vous ne pourriez pas besoin Redux' post de blog.

• sum ajoute une valeur à l'accumulateur
• reducer ajoute/soustrait une valeur à/de l'accumulateur.

Dans les deux cas, ici, de l '"état" est juste un entier.

Vous êtes à 'accumuler' les actions en l'état. C'est aussi l'immuable moyen de modifier un objet JavaScript.

JS:

const sum = function(acc, val) {
    return acc + val;
};

const reducer = function(state, action) {
    switch (action) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
};

console.log('sum', [1, -1, 1].reduce(sum, 0));

console.log('reduce', ['INCREMENT', 'DECREMENT', 'INCREMENT'].reduce(reducer, 0));

console.log('sum', [1, 1, 1].reduce(sum, 0));

console.log('reduce', ['INCREMENT', 'INCREMENT', 'INCREMENT'].reduce(reducer, 0));

Comment nous l'appelons Deducer à partir de maintenant. Il en déduit que le nouvel état en fonction de l'état précédent et l'action entrante.