未定义 Redux 中间件

Question

我在运行这段代码时遇到 'middleware is not a function' 错误。

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');

这是在 ES6 中，我正在使用 Babel 进行转译。如果你愿意，我可以post编译代码，但它真的很长。

为什么我会收到错误消息？

编辑

好的，我跳进去查看了转译后的 js。好像有这个功能-

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

并且 _reduxThunk 没有 thunkMiddleware 属性。在控制台中，当我控制台注销 _reduxThunk 时，我得到了这个

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);
    };
  };
}

所以看起来 _reduxThunk 是 thunkMiddleware。我想这是一个 babel 错误 - 为什么 babel 会出错？

Answer 1

好的。这是非常基本和愚蠢的。结果 Provider 不在 'redux-thunk' 中，而是在 'redux-react'.

中

这只是错误消息的一个例子。

Answer 2

applyMiddleware 应该从 redux 导入。

Node.js

const applyMiddleware = require("redux").applyMiddleware

Angular

import { applyMiddleware } from "redux"

未定义 Redux 中间件

Redux middleware is not defined

javascript

flux

ecmascript-6

babeljs

redux