Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Redux middleware is not defined

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?

like image 915
praks5432 Avatar asked Sep 27 '15 02:09

praks5432


1 Answers

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.

like image 181
praks5432 Avatar answered Oct 12 '22 09:10

praks5432