redux: Cannot read property 'apply' of undefined

I was having this issue as well. @markerikson’s solution worked for me. In my case, I’m using both redux-thunk and redux-logger. I replaced “compose” with “composeWithDevTools” and it worked;

import {createStore, applyMiddleware} from 'redux';
import rootReducer from '../reducers/rootReducer';
import thunk from 'redux-thunk';
import {composeWithDevTools} from 'redux-devtools-extension/developmentOnly';
import {createLogger} from 'redux-logger';

const logger = createLogger({
    /* https://github.com/evgenyrodionov/redux-logger */
    collapsed: true,
    diff: true
});

const  configureStore = function (initialState) {
    return createStore(
        rootReducer, 
        initialState, 
        composeWithDevTools(
            /* logger must be the last middleware in chain to log actions */
            applyMiddleware(thunk, logger)  
        )
    );
}

export default configureStore;

Had this error when running in a browser without the devtools extension. Fixed once I installed it. Now to make it work without…

I had hit this same error this morning. Yesterday, I was working on my home computer that I had added the redux-devtools extension added to Chrome already, but it turns out that on my work computer, I hadn’t added it to Chrome yet. The error went away as soon as I added redux-devtools to the browser.

You can use this instead:

import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

I commented DEV TOOLS from store and it started working. I work in secure ODC so they dont allow me to install any chrome plugin

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware)
  //  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

Solved this with just spread and ternary operators, maybe someone else will like this approach:

export const createAppStore = (initialState = {}) => {
  const middleware = [
    applyMiddleware(thunkMiddleware),
    ...(window.__REDUX_DEVTOOLS_EXTENSION__ ? [window.__REDUX_DEVTOOLS_EXTENSION__()] : [])
  ]
  const store = createStore(
    rootReducer,
    initialState,
    compose(...middleware)
  )
  return store
}

// dev tools middleware
const composeSetup = process.env.NODE_ENV !== 'production' && typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose

// store
let store = createStore(
    reducer,
    composeSetup(applyMiddleware(sagaMiddleware))
);

@four-eyes-04-04 That’s because you should pass to compose only functions. But with falsy redux extension you pass false and compsoe trying to call apply of false.

This is what worked for me (just replace devTools with a simple function onto itself in production)

import { compose, createStore } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import rootReducer from './reducers';

// eslint-disable-next-line no-underscore-dangle
let devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && 
window.__REDUX_DEVTOOLS_EXTENSION__();
if (process.env.NODE_ENV === 'prod' || process.env.NODE_ENV === 'production') {
    devTools = a => a;
}

const store = createStore(
    rootReducer,
    undefined,
    compose(
      autoRehydrate(),
      devTools,
    ),
);

Just ran into this error by doing the following:

const devTools = process.env.NODE_ENV === 'development' ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__() : null

const store = createStore(
  rootReducer,
  compose(applyMiddleware(thunk), devTools)
)

Which to me is a lot neater than the alternative I’ve found of replacing the entire compose function based upon that ternary instead.

Is there a better way to do this?

For anybody running in the same problem, I got this error because I had the devtools extension disabled in Chrome. Instead of using composeWithDevTools I just re-enabled the redux devtools extension and now it works.

We had a “strip out falsy values” check in compose at one point, but it got pulled back out in #2167 .

I’m not sure why there’s a difference in behaviors between browsers, but yes, compose expects only actual functions .

@kirankumarrr this error will always be thrown if you haven’t instealled the redux dev tools. You have to explicit allow extension in incognito mode, if not they will be deacti vated. You can do so in the chrome extensions page for an individual extension:

Or just build in a conditional that falls back to the normal compose method so it works when Redux Dev Tools are not installed:

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
    rootReducer,
    initialState,
    composeEnhancers(
        applyMiddleware( ...middleware ),
    )
);