Redux reducers allow you to make changes to your state in your application. Redux actions only tell the application _what happened_, not what _should_ happen. The reducer will allow you to update your state based on the action that was fied.
In programming terms, a reducer is a function that operates on a collection and spits out something new. In other words, it _reduces_ the collection to a single value, which could be a number, string, or even a new collection.
More info on `reduce` on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
The reducer function `(accumulator, value) => accumulator + value` is called on each item in the collection, where the value of `accumulator` is the return value of the reducer function called on the previous element, or if it's the first element, then the starting value.
Let's walk through it one step at a time:
```js
const numbers = [1, 2, 3, 4]
const sum = numbers.reduce((accumulator, value) => {
console.log('accumulator', accumulator)
console.log('value', value)
return accumulator + value
}, 0)
console.log('sum', sum)
// 'accumulator' 0 // starting value
// 'value' 1 // first element in collection
// 'accumulator' 1 // result of 0 + 1
// 'value' 2 // second element in collection
// 'accumulator' 3 // result of 1 + 2
// 'value' 3 // third element in collection
// 'accumulator' 6 // result of 3 + 3
// 'value' 4 // fourth element in collection
// 'sum' 10 // result of 6 + 4
```
Reducers must always be pure functions, otherwise reducers may not be predictable. This means that given the same function arguments, the result will always be the same, and it does not change any properties or variables outside of the function.
Notice that the two calls to `addA` gave different results. This is why it is _impure_. It's important to make sure that reducer functions do _not_ mutate anything outside of its scope.
Now that we're familiar with reducers, how does that relate to Redux? If you imagine all of the actions fired in your Redux app to be an array of actions, like this:
You can generate new state based on those list of actions. How would we do that? By using a reducer function, which takes in the current state and the action that was triggered and then returns a new state. Here we used the ES6 default parameter syntax to assign a default value to the state array, like so:
You can treat the `state` argument as an accumulator. The `...` spreads through the current state so that you make a copy of the state rather than overwriting it.
Now, if we run the reducer function through the list of actions, we can get new states: