Redux: the previous state received by the reducer has unexpected type of "Function"

Question

When I add middleware for chrome extension, reducers stop working properly on site (but chrome/redux debug tool works) + I get following error in console:

The previous state received by the reducer has unexpected type of "Function". Expected argument to be an object with the following keys: "auth", "common", "home"

Here is code:

import { applyMiddleware, createStore } from 'redux';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducer';

const middleware = applyMiddleware(promiseMiddleware, localStorageMiddleware);

const store = createStore(reducer, middleware,
      window.devToolsExtension ? window.devToolsExtension() : f => f);

export default store;

If I remove chrome part:

,window.devToolsExtension ? window.devToolsExtension() : f => f

If works normal again.

Solution 1

createStore takes up to 3 arguments. If the second argument is a function it assumes that your second argument is the store enhancer. If it is an object or there are 3 arguments present it assumes that the argument is your initial state. See here.

Your middleware variable is a store enhancer and the chrome extension is also an enhancer:

window.devToolsExtension ? window.devToolsExtension() : f => f

You have to compose both in a single function:

import { applyMiddleware, createStore, compose } from 'redux';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducer';

const middleware = applyMiddleware(promiseMiddleware, localStorageMiddleware);

const store = createStore(
  reducer,
  compose(middleware, window.devToolsExtension ? window.devToolsExtension() : f => f)
);

export default store;

Documentation for this can be found here.

Solution 2

createStore accepts the following arguments:

• reducer
• preloaded state
• enhancer

If only two arguments supplied and the second argument is a function, then it's considered to be an enhancer. See more in the source code.

If you want to use Redux devtools, then you should compose it as an additional enhancer.

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

    const store = createStore(
      reducer,
      compose(
        middleware,
        window.devToolsExtension ? window.devToolsExtension() : f => f
      )
    )

Hope that helps. Pozdrav 😉