Redux 中间件未定义

Posted 2023-02-22

【中文标题】Redux 中间件未定义

【英文标题】：Redux middleware is not defined

【发布时间】：2015-12-24 13:55:03

【问题描述】：

我在运行此代码时收到“中间件不是函数”错误。

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 进行编译。如果你愿意，我可以发布编译后的代码，但它真的很长。

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

编辑

好的，我跳进去查看了转译的 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 会出错？

【问题讨论】：

旁注：predicate 有一个无操作箭头功能。

【参考方案1】：

applyMiddleware 应该从 redux 导入。

Nodejs

const applyMiddleware = require("redux").applyMiddleware

角度

import  applyMiddleware  from "redux"

【参考方案2】：

好的。这是非常基本和愚蠢的。原来 Provider 不在“redux-thunk”中，而在“redux-react”中。

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

【讨论】：

你能解释一下你的答案吗？我有同样的问题。

你需要这样做` import Provider from 'redux-react'; 我认为

次要点 ... import Provider from 'react-redux' ... 不是 'redux-react'