Example showing how redux reducers are just normal reducers, using the example of summing an array of numbers.

reducer-example.js

/* eslint-disable */
// Note: requires redux

// Run this and read the comments
const { createStore } = require('redux')

const INITIAL_STATE = 0
const ACTIONS = [
  { type: 'number', value: 1 },
  { type: 'number', value: 2 },
  { type: 'number', value: 3 },
]

const reducer = (state, action) => {
  // Redux dispatches an init event that we need to discard
  if (action.type !== 'number') return state

  // Each step we make a new state by adding the old state and the new value
  const result = state + action.value

  // Logging so that you can see the before and after at each iteration
  console.log({ state, value: action.value, result })

  return result
}

/* All examples use
 * - an initial state (0 in this case, but can be anything)
 * - a reducer, to convert a state and value to a new state
 * - a set of values ("actions" for redux, anything for array reduce)
 *
 *  They're so similar that we can use the *same* initial state, reducer, and
 *  actions with all of them to get the same result...
 */

/* For loops - This is pretty much exactly what happens internally in the
 * array reduce and redux examples too, reducer gets called once for each
 * action to generate a new state
 */
console.log('Via for loop')
let state = INITIAL_STATE
for (const action of ACTIONS) {
  state = reducer(state, action)
}
console.log('Final state:', state)

// Array reduce is pretty succinct
console.log('Via array reduce')
console.log('Final state:', ACTIONS.reduce(reducer, INITIAL_STATE))


// Redux is only a little more verbose
console.log('Via redux store')
const store = createStore(reducer, INITIAL_STATE)
ACTIONS.forEach(action => store.dispatch(action))
console.log('Final state:', store.getState())

/* If you see the output above, the output from each approach is the same and
 * we're using the same inputs (initial state, reducer, and actions) to generate
 * them.
 *
 * Redux is a little more verbose, but it has the advantage that you can keep
 * on pushing new values ("actions") whenever you need to (e.g. as a user
 * interacts with your application) and get the state at that point in time,
 * while the array reduce is a once off thing.
 *
 * Hope this is helpful in understanding both array reduce and using that
 * understanding to understand how redux is really just a more opinionated
 * and flexible array reduce.
 */