Redux-logger导出已更改

hfwmuf9z  于 2023-04-30  发布在  其他
关注(0)|答案(1)|浏览(73)

我已经把我的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显示了这些变化。
这是我目前的店铺。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)

这是我的导航栏。js top lines:

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和所有依赖项之前就已经开始工作了。会不会叫得太早了?

1zmg4dgp

1zmg4dgp1#

您正在导入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))

相关问题