Question

我已将webpack升级到最新版本。用我的webpack.config解决了一些问题之后我可以再次编译。但是，当我尝试运行我的网站时，我发现以下错误：

[redux-logger v3] BREAKING CHANGE
[redux-logger v3] Since 3.0.0 redux-logger exports by default logger with default settings.
[redux-logger v3] Change
[redux-logger v3] import createLogger from 'redux-logger'
[redux-logger v3] to
[redux-logger v3] import { createLogger } from 'redux-logger'

Uncaught TypeError: middleware is not a function
at applyMiddleware.js:39
at Array.map (<anonymous>)
at applyMiddleware.js:38
at createStore (createStore.js:51)
at configureStore (store.js:13)
at Object.<anonymous> (NavBar.js:7)
at Object.module.exports (bundle-hot.js:106583)
at __webpack_require__ (bootstrap 876f8fb1506d9b4ca875:707)
at fn (bootstrap 876f8fb1506d9b4ca875:112)
at Object.<anonymous> (App.js:6)

我访问了redu-logger的npm页面，示例仍然是旧格式。然而doc page显示了变化。

这是我目前的store.js

import { applyMiddleware, compose, createStore } from 'redux';

import { thunk } from 'redux-thunk';
import { logger } from "redux-logger"
import { browserHistory } from 'react-router';
import { routerMiddleware } from 'react-router-redux';

import reducer from '../reducers';

const middleware = applyMiddleware(thunk, logger({collapsed:true}),     routerMiddleware(browserHistory));

export default function configureStore(initialState) {
const store = createStore(
    reducer,
    initialState,
    compose (
        middleware,
        window.devToolsExtension ? window.devToolsExtension() : f => f
    )
);

if(__DEVTOOLS__){
    if (module.hot) {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../reducers', () => {
            const nextRootReducer = require('../reducers').default;
            store.replaceReducer(nextRootReducer);
        });
    }

}
return store;
}

我正在使用的版本：

"redux": "3.7.2"
"redux-thunk": "2.2.0",
"redux-logger": "3.0.6",
"react-router": "4.2.0",
"react-router-redux": "4.0.8",

更新＃1

根据@Alechill的回答，我现在得到以下问题（我认为是相关的）：

sync.js:104 Uncaught TypeError: Cannot read property 'listen' of undefined
at syncHistoryWithStore (sync.js:104)
at Object.<anonymous> (NavBar.js:8)
at Object.module.exports (bundle-hot.js:106587)
at __webpack_require__ (bootstrap 1b638ac8e0fc25802b6f:707)
at fn (bootstrap 1b638ac8e0fc25802b6f:112)
at Object.<anonymous> (App.js:6)
at Object.<anonymous> (bundle-hot.js:66975)
at __webpack_require__ (bootstrap 1b638ac8e0fc25802b6f:707)
at fn (bootstrap 1b638ac8e0fc25802b6f:112)
at Object.<anonymous> (index-hot.js:9)

这是我的NavBar.js顶行：

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import configureStore from '../store/store';
const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store);

错误来自 syncHistoryWithStore ，它使用商店。

在我升级到最新版本的webpack和所有依赖项之前，这是有效的。是不是很快就被召唤了？

Answer 1

您要导入logger，但应导入createLogger，因为导出已更改

来自defs类型：

export const logger: Redux.Middleware;
export function createLogger(options?: ReduxLoggerOptions): Redux.Middleware;

您导入的logger只是中间件的默认实例，但您尝试将其称为工厂函数

您可以通过以下方式修复模块中的内容：

import { createLogger } from 'redux-logger'
const middleware = applyMiddleware(thunk, createLogger({collapsed:true}), routerMiddleware(browserHistory))

Redux-logger导出已更改

1 个答案: