JS Practice — Built-in Objects

Logger Middleware

📖 Usage Example

const logger = store => next => action => {
  console.log('dispatching', action)
  const result = next(action)
  console.log('next state', store.getState())
  return result
}

const store = createStore(reducer, applyMiddleware(logger))

Logger middleware intercepts every dispatched action, logs it, passes it along, then logs the resulting state.

Logger Middleware

Redux middleware uses a curried function signature:

const middleware = store => next => action => {
  // do something
  return next(action)
}

store — the Redux store (gives access to getState and dispatch)
next — the next middleware in the chain (or the real dispatch)
action — the dispatched action

Calling next(action) passes the action along the chain. Always return the result so callers can chain the return value.

Challenge: Implement logger middleware that simply calls next(action) and returns the result.

💡 Hints (2)

• The three-level curried signature is required by Redux's `applyMiddleware`.
• Always `return next(action)` so callers receive the return value (especially important for thunks).