React devToolsExtension breaks the store

Question

When I create a store using

const store = createStore(reducers, applyMiddleware(...middleware),  window.devToolsExtension ? window.devToolsExtension() : f => f)

I receive a warning in the console and the store doesn't work:

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

When I remove the DevTools

const store = createStore(reducers, applyMiddleware(...middleware));

it starts working again.

Do you how to asign DevTools and have the app still working? If you'd like to see some sources have a look at this question. It's configured in the pretty same manner as my app.

Answer 1

I've set up my tools like this:

const store = createStore(
    rootReducer,
    initialState,
    compose(
        applyMiddleware(
            thunkMiddleware,
            createLogger(),
            errorHandler,
            navigate,
            tracking
        ),
        window.devToolsExtension ? window.devToolsExtension() : f => f
    )
);

Note the use of compose here, you import it from redux along with applyMiddleware and createStore.

IIRC your way of doing it used to work in an older version of redux, but I can't be certain exactly when it stopped working. I do remember having the same problem you had though.