¿Por qué las funciones de estado de Redux se llaman reductores?

Esta es una parte de la documentación oficial de Redux :

Se llama reductor porque es el tipo de función a la que pasaría Array.prototype.reduce(reducer, ?initialValue)

No tiene mucho sentido para mí. ¿Alguien podría explicarme por qué en realidad se llaman reductores? El hecho de que devuelvan un valor predeterminado (o que tengan un valor de argumento predeterminado) no los convierte en reductores en mi humilde opinión.

El hecho de que devuelvan un valor predeterminado (o que tengan un valor de argumento predeterminado) no los convierte en reductores en mi humilde opinión.

Los reductores no solo devuelven valores predeterminados. Siempre devuelven la acumulación del estado (en función de todas las acciones anteriores y actuales).

Por tanto, actúan como reductores de estado. Cada vez que se llama a un reductor redux, el estado se transfiere con la acción (state, action). Este estado luego se reduce (o acumula) según la acción, y luego se devuelve el siguiente estado. Este es un ciclo del clásico foldo reducefunción.

Como resumió @azium state -> action -> state.

Si considera que la serie de acciones en su aplicación es como una lista, o tal vez más como una transmisión, podría tener más sentido.

Tome este ejemplo artificial:

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

El primer argumento es una función de la forma (Int, String) => Int. Junto con un valor inicial, pasa reducelo que podría llamarse una "función reductora" y obtiene el resultado de procesar la serie de elementos. Podría decirse que la función reductora describe lo que se hace con cada elemento individual sucesivo para cambiar el resultado. En otras palabras, la función reductora toma la salida anterior y el siguiente valor, y calcula la siguiente salida.

Esto es análogo a lo que hace un reductor Redux: toma el estado anterior y la acción actual, y calcula el siguiente estado.

En el verdadero estilo de programación funcional, puede borrar conceptualmente el significado aplicado a los argumentos y el resultado, y simplemente centrarse en la "forma" de las entradas y salidas.

En la práctica, los reductores Redux suelen ser ortogonales, en el sentido de que para una acción determinada, no todos realizan cambios en las mismas propiedades, lo que facilita la división de responsabilidades y la agregación de la salida combineReducers.

Como ya se mencionó, el nombre está relacionado con el concepto de reductor en la programación funcional. También puede encontrar útil la definición de reductor del diccionario Merriam-Webster:

1a. para juntar o hacer converger: consolidar (reducir todas las preguntas a una)

El reductor consolida acciones en un solo objeto que representa el estado de la aplicación.

La razón por la que un redux reductor se llama a reduceres porque podría "reducir" ay collection of actionsun initial state(de la tienda) en el que realizar estas acciones para obtener el resultado final state.

¿Cómo? Para responder a eso, déjame definir un reductor nuevamente:

El método reduce () aplica un function (reducer)contra un accumulatory cada valor de la matriz (de izquierda a derecha) para reducirlo a un solo valor.

¿Y qué hace un reductor redux?

El reductor es un puro functionque toma el estado actual y una acción, y devuelve el siguiente estado. Tenga en cuenta que el estado es accumulatedcuando se aplica cada acción en la colección para cambiar este estado.

Entonces, dado a collection of actions, el reductor se aplica a cada valor de la colección (de izquierda a derecha). La primera vez, devuelve el initial value. Ahora, el reductor se aplica nuevamente en este estado inicial y la primera acción es devolver el siguiente estado. Y el siguiente elemento de colección (acción) se aplica cada vez en el current statepara obtener el next statehasta que llega al final de la matriz. Y luego, obtienes the final state. ¡Cuan genial es eso!

El autor piensa que el estado es el acumulador de la función de reducción. Ex:

Final State = [Action1, Action2, ..., ActionN].reduce(reducer, Initial State);

La función de reducción proviene de Programación funcional, el nombre "reductor" también proviene de FP.

No me gusta usar ese nombre aquí. Porque no veo el mundo como un resultado de valor único después de las acciones. El estado aquí es un objeto. Por ejemplo:

['eat', 'sleep'] === [addTodo('eat'), addTodo('sleep')].reduce(reducer, []);

Este Reductor no reduce nada en absoluto. Y no me importa que reduzca nada o no. Nombrarlo como Transductor tendrá más sentido.

Sabemos de dónde provienen los Reductores (programación funcional) y por qué se puede considerar que están haciendo un trabajo de reducción (reducir n elementos de entrada a un solo valor de retorno, que es justo lo que se supone que hacen las funciones normales). Sin embargo: el nombre es solo un nombre, como rosa es el nombre de una rosa. No pienses demasiado. Los programadores de Redux son gente de TI, están encerrados en su contexto y ahí tiene sentido. El resto de nosotros tenemos que aceptar el derecho del inventor a llamar gato amarillo a un perro azul ;-)

¿Qué tal si lo llamamos Deducer de ahora en adelante? Deduce el nuevo estado basándose en el estado anterior y la acción entrante.

No deben llamarse reducir ya que reducir significa hacer menos, estas funciones suelen producir más. y luego devuélvelo

No pude ver cómo un reductor de Redux se asigna directamente a la función con la que usa reduce, así que aquí hay un par de ejemplos para ver cómo coinciden.

Primero, una función de reducción estándar (llamada 'acumulador' en MDN) de la documentación de MDN Array.reduce y luego un ejemplo simplificado de Dan Abramov Counter.jsal final de su publicación de blog 'Es posible que no necesite Redux' .

• sum agrega un valor al acumulador
• reducer suma / resta un valor a / del acumulador.

En ambos casos, aquí el 'estado' es solo un número entero.

Estás "acumulando" las acciones en el estado. Esta es también la forma inmutable de modificar cualquier objeto JavaScript.

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));

Otras respuestas explican bien por qué se llama así, pero intentemos nombrar más cosas ...

const origState = 0;
const actionOperators = {
    increment: (origState) => origState++,
    decrement: (origState) => origState--,
};
const anOperator = (aState, anAction) => actionOperators[anAction](aState);
const actions = ['increment', 'decrement', 'increment'];
const finalState = actions.reduce(anOperator, origState);

Primero, reducepodría llamarse use anOperator with every action name and accumulated state, starting with origState. En smalltalk se llama actions inject: origState into: anOperator. Pero, ¿qué inyecta realmente en el operador? El origState Y los nombres de las acciones. Así que incluso en Smalltalk, los nombres de los métodos no son muy claros.

actionOperators[increment]es un Reducer, pero prefiero llamarlo y actionOperator porque está implementado para cada acción. El estado es solo un argumento (y otro como valor de retorno).

Reductor es, sin embargo, una palabra mejor para estar en la parte superior de los resultados de búsqueda de Google. También es similar a Redux.

En este código a continuación, solo necesita pensar en el acumulador como las acciones y currentValue como un estado en el contexto redux. Con este ejemplo descubrirás por qué también lo nombran reductor.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// Main operation is 1 + 2 + 3 + 4 = 10
// but think of it as a stack like this: 

// | 2 | | 3 | | 4 | 
// |_1_| |_3_| |_6_| | 10 | => the 10 is in result

console.log(array1.reduce(reducer));
// expected output: 10

El método reduce () ejecuta una función reductora (que usted proporciona) en cada elemento de la matriz, lo que da como resultado un único valor de salida.