Redux middleware is not defined

Question

I'm getting a 'middleware is not a function' error when I run this code.

import 'babel-core/polyfill';
import { thunkMiddleware, Provider } from 'redux-thunk';
import createLogger from 'redux-logger';
import { createStore, applyMiddleware } from 'redux';
import { fetchDistricts, fetchSchools } from './actions.es6.js';
import rootReducer from './reducers.es6.js';
// import App from './components/App.es6.js';

const logger = createLogger({
    level: 'info',
    collapsed: true,
    predicate: (getState, action) => {action.type; }
});


const createStoreWithMiddleware = applyMiddleware(
    thunkMiddleware,
    logger
)(createStore);

const store = createStoreWithMiddleware(rootReducer);

store.dispatch(fetchDistricts('California')).then(state =>
    {
        var districts = store.getState().districtsByState['California'].districts;
        var fetchSchoolsDfds = [];
        for(var i = 0; i < districts.length; i++) {
            fetchSchoolsDfds.push(store.dispatch(fetchSchools(districts[i].id)));
        }
    }
);

let rootElement = document.getElementById('root');

This is in ES6 and I'm transpiling using Babel. I can post the compiled code if you want, but it's really long.

Why am I getting the error?

EDIT

Ok I jumped in and looked at the transpiled js. It looks like there is this function -

var createStoreWithMiddleware = _redux.applyMiddleware(_reduxThunk.thunkMiddleware, logger)(_redux.createStore);

and _reduxThunk does not have a thunkMiddleware property. In the console when I console log out _reduxThunk, I get back this

function thunkMiddleware(_ref) {
  var dispatch = _ref.dispatch;
  var getState = _ref.getState;

  return function (next) {
    return function (action) {
      return typeof action === 'function' ? action(dispatch, getState) : next(action);
    };
  };
}

So it looks like _reduxThunk IS thunkMiddleware. I imagine this is a babel error - why is babel getting this wrong?

Bourges

Side note: you have a no-op arrow function for predicate . – Sitology

Answer 1

Ok. This was pretty basic and stupid. Turns out Provider is not in 'redux-thunk' and is in 'redux-react'.

This was just a case of a bad error message.

Bourges

Can you explain your answer please? I have same issue. – Judaize

You need to do this ` import { Provider } from 'redux-react'; I think – Bourges

Minor point ... import { Provider } from 'react-redux' ... not 'redux-react' – Uric

Answer 2

applyMiddleware should be imported from the redux.

Nodejs

const applyMiddleware = require("redux").applyMiddleware

Angular

import { applyMiddleware } from "redux"

Anonymous