JS Practice — Built-in Objects

Higher-Order Reducers

📖 Usage Example

const withLogging = (s, a) => { console.log(a.type); return s }
const combined = composeReducers(myReducer, withLogging)

// Each action is processed by myReducer, then by withLogging

Higher-order reducers add cross-cutting concerns (logging, undo, analytics) to any reducer without modifying its source.

Higher-Order Reducers

A higher-order reducer wraps another reducer to add cross-cutting behaviour. composeReducers runs state through multiple reducers in sequence — each one can handle different action types:

const combined = composeReducers(reducerA, reducerB)
combined(state, action)
// → reducerB(reducerA(state, action), action)

This is the functional equivalent of function composition for reducers.

Challenge: Implement composeReducers(...reducers) that takes any number of reducer functions and returns a single reducer that pipes state through each of them.

💡 Hints (2)

• `Array.prototype.reduce` is perfect here — start with the initial state and fold each reducer over it.
• `Array.prototype.slice.call(arguments)` converts the `arguments` object into a real array.