Learning Redux

Hiding monkeypatching

Let's try to put our monkeypatching into a nicer solution. Instead of replacing the store.dispatch function directly, we will create a higher-order function that returns our dispatchAndLog function:

// DO NOT DO THISfunction logger (store) {  const next = store.dispatch  return function dispatchAndLog (action) {    if (console.group) console.group(action.type)    console.info('dispatching', action)    const result = next(action)    console.log('new state', store.getState())    if (console.groupEnd) console.groupEnd(action.type)    return result  }}

Now, we could provide a helper function that applies the monkeypatching as an implementation detail. This allows us to apply multiple middleware like the preceding one:

// DO NOT DO THISfunction ...