Search code examples
reduxmiddlewareredux-offline

redux-offline ignore middlewares when executing commit or rollback actions


As shown at https://github.com/redux-offline/redux-offline/pull/178#issuecomment-408795302, we are trying to use with redux-offline a middleware that can dispatch new actions after their counter-parts commit or rollback are executed. Point is that these ones are not dispatched, and after debugging it, we have found that when dispatching the initial action the middleware is being used as the dispatch() function (probably due to how redux composeEnhancers() and applyMiddleware() function works, since they are chaining the functions), but when the commit action is dispatched, it's done using directly the store dispatch() method, so no middleware is being executed at all.

We are not fully sure if it's a fault on our side regarding redux-offline configuration, or a bug in redux-offline itself... Our store configuration is like this:

import { applyMiddleware, compose, createStore } from 'redux'

import reduxOfflineThunkMiddleware from './thunk-middleware'
import rootReducer from '../../reducers'

import { createUser } from '../../actions/user'

const initialState = {}

const windowCompose = (typeof window !== 'undefined') && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
const composeEnhancers = windowCompose || compose

const store = createStore(
  rootReducer,
  initialState,
  composeEnhancers(
    applyMiddleware(reduxOfflineThunkMiddleware({ createUser })),
    offline()
  )
)

Solution

  • Yes, both offline and applyMiddleware are "store enhancers". When you call store.dispatch, the action sequence will be:

    • Processed by all the middlewares in the middleware pipeline
    • Processed by offline
    • Handled by the store itself

    Because the offline enhancer is after the applyMiddleware enhancer, any actions that it dispatches internally will never go through the middleware pipeline.