Why are Redux state functions called reducers?

Question

This is part of the official Redux documentation :

It is called a reducer because it is the type of function that you pass to Array.prototype.reduce(reducer,?initialValue)

That doesn't make much sense to me. Can someone explain to me why they are actually called gearboxes? The fact that they return a default value (or have a default argument value) does not make them IMHO reducers.

Answer 1

The fact that they return a default value (or they have a default argument value) does not make them IMHO reducers.

Gearboxes don't just return defaults. They always return state accumulation (based on all previous and current actions).

Therefore, they act as a state reducer. Each time a reduction gearbox is called, the state is transferred with an action (state, action) . This state then decreases (or accumulates) based on the action, and then the next state returns. This is one loop of the classic fold or reduce function.

How @azium stacks with state -> action -> state .

Answer 2

If you think that the sequence of actions in your application will look like a list or maybe more like a stream, this might make more sense.

Take this contrived example:

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

The first argument is a function of the form (Int, String) => Int . Along with the initial value, you pass reduce what can be called a “reducer function”, and you get the result of processing a number of elements. So you can say that the reducer function describes what is done with each subsequent individual element to change the result. In other words, the reducer function takes the previous output and the next value, and it calculates the next result.

This is similar to what the Redux reducer does: it takes the previous state and current action and calculates the next state.

In the true style of functional programming, you can conceptually erase the value applied to the arguments and the result, and just focus on the “form” of the inputs and outputs.

In practice, Redux gearboxes are usually orthogonal, in the sense that for a given action they do not all make changes to the same properties, which makes it easy to share their responsibilities and summarize the result using combineReducers .

Answer 3

As already mentioned, the name is associated with the concept of the gearbox in functional programming. You can also find a useful Merriam-Webster dictionary definition for reducer:

1a. to unite or bring together: consolidate (reduce all questions to one)

The reducer combines actions into a single object representing the state of the application.

Answer 4

The reason the reducer is called reducer is because you could "reduce" the collection of actions and the initial state (storage) in which you need to perform these steps to get the final final state .

How? To answer this question, let me define the gearbox again:

The redu () method applies function (reducer) to the accumulator and each value of the array (from left to right) to reduce it to one value.

What does the gearbox do?

A reducer is a pure function that takes the current state and action and returns the next state. Note that the state is accumulated since every action in the collection is used to change this state.

Thus, taking into account the collection of actions reducer is applied to each value of the set (from left to right). The first time returns initial value . Now the gearbox is again applied to this initial state and the first action is to return the next state. And the next element of the collection (action) is applied each time to the current state to get the next state until it reaches the end of the array. And then you get the final state . How awesome it is!

Answer 5

The author considers the state of the battery reduction function. Example:

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

The reduction function comes from functional programming, the name "gear" also comes from FP.

I do not like to use this name here. Because I do not see the world as the result of a single meaning after action. The state here is an object. For example:

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

This reducer does not reduce anything. And I do not care that he reduces something or not. Naming it as a Converter will make more sense.

Answer 6

We know where the reducers come from (functional programming), and why they can be considered reducing the work (reduce the number of input elements to one return value, which is the normal function of supposted do). However: The name is just a name, for example, a rose is the name of a rose. Do not think too much. Redux progamers are IT professionals, they are locked in their context, and that makes sense there. The rest should accept the right of the inventor to call a blue dog a yellow cat ;-)

Answer 7

I could not understand how the Redux reducer is directly mapped to the function you use with reduce , so here are a couple of examples to see how they match.

First, the standard reducer function (called the “battery” in MDN) from the MDN Array.reduce documentation , and then a simplified Dan Abramov Counter.js example at the end of his post “You May Not Need Redux” .

• sum adds value to the battery
• reducer adds / subtracts a value to / from the battery.

In both cases, here the “state” is just an integer.

You "accumulate" actions in the state. It is also an immutable way to modify any JavaScript object.

 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 8

They should not be called “reduce,” since “reduce” means “do less,” these functions often give more. and then return it

Answer 9

Other answers explain well why it is named as it is, but let's try to name more things ...

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

First, reduce can be called, use anOperator with every action name and accumulated state, starting with origState . In smalltalk, this is called actions inject: origState into: anOperator . But what do you actually enter into the operator? OriginState and action names. So even in Smalltalk, method names are not very clear.

actionOperators[increment] is a Reducer, but I would rather call it actionOperator, because it is implemented for every action. State is just an argument (and another one as the return value).

A reducer, however, is the best word to be at the top of Google search results. It also looks like Redux.

Answer 10

How about now calling him Deducer ? It infers a new state based on the previous state and the incoming action.

Answer 11

In this code below, you just need to think of the battery as an action, and currentValue as a state in a reduction context. With this example, you will learn why they also call it a reducer.

 const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // Think of it as a stack like is: // | 2 | | 3 | | 4 | // |_1_| |_3_| |_6_| | 10 | => the 10 is in result console.log(array1.reduce(reducer)); // expected output: 10 

The redu () method performs the function of the reducer (which you provide) for each element of the array, resulting in a single output value.