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

redux react native español

Question

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

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

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

Answer 1

El hecho de que devuelvan un valor predeterminado (o tienen un valor de argumento predeterminado) no los hace 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 lo tanto, actúan como un reductor de estado. Cada vez que se llama a un reductor redux, el estado se pasa con la acción (state, action) . Este estado se reduce (o acumula) en función de la acción, y luego se devuelve el siguiente estado. Este es un ciclo de la función clásica de fold o reduce .

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

Answer 2

La razón por la cual un reductor redux se llama reducer es porque podría "reducir" una collection of actions y un initial state (de la tienda) en el que realizar estas acciones para obtener el final state resultante.

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

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

¿Y qué hace un reductor redux?

El reductor es una function pura que toma el estado actual y una acción, y devuelve el siguiente estado. Tenga en cuenta que el estado se accumulated medida que se aplica cada acción en la colección para cambiar este estado.

Entonces, dada una 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 para devolver el siguiente estado. Y el siguiente elemento de colección (acción) se aplica cada vez en el current state para obtener el next state hasta que llegue al final de la matriz. Y luego, obtienes the final state . ¡Cuan genial es eso!

Answer 3

¿Qué tal si lo llamamos Deductor de ahora en adelante? Se deduce el nuevo estado en función del estado anterior y la acción entrante.

Answer 4

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

1a. para unir o hacer que converjan: consolidar (reducir todas las preguntas a una)

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

Answer 5

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 reducir proviene de la 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.

Answer 6

En este código a continuación solo necesita pensar en el acumulador como las acciones y currentValue como un estado en contexto redux. con este ejemplo, descubrirá por qué lo nombran también como 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.

Answer 7

No deberían llamarse reducir, ya que reducir significa hacer menos, estas funciones a menudo hacen más. y luego devolverlo

Answer 8

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

Primero, una función de reductor estándar (llamado ''acumulador'' en MDN) de la documentación de MDN Array.reduce y luego un ejemplo simplificado de Counter.js de Dan Abramov al final de su publicación en el blog ''Puede que no necesite Redux'' .

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

En ambos casos, 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));

Answer 9

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, reduce podrí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é inyectas realmente al operador? El origState Y los nombres de acción. Entonces, incluso en el método Smalltalk, los nombres no son muy claros.

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

Sin embargo, reducir es una mejor palabra para estar en la cima de los resultados de búsqueda de Google. También es similar a Redux.

Answer 10

Sabemos de dónde provienen los Reductores (programación funcional) y por qué se podría considerar que están haciendo trabajos de reducción (reducen n elementos de entrada a un solo valor de retorno, que es exactamente 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 personas de TI, están encerrados en su contexto y allí tiene sentido. El resto de nosotros tenemos que aceptar el derecho del inventor de llamar a un perro azul un gato amarillo ;-)

Answer 11

Si considera que la serie de acciones en su aplicación es como una lista, o tal vez más como una secuencia, 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 reduce lo que podría llamarse una "función reductora", y obtiene el resultado del procesamiento de la serie de elementos. Entonces, podría decir 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 un 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 de 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 dividir sus responsabilidades y agregar la salida con combineReducers .