gpt4 book ai didi

node.js - "composeEnhancers"不是 ReactJS 中的函数

转载 作者:行者123 更新时间:2023-12-02 21:06:27 26 4
gpt4 key购买 nike

我的代码中出现以下错误:

TypeError: composeEnhancers is not a function
const store = createStore(rootReducer, composeEnhancers(
applyMiddleware(thunk)
));

谁能看出问题出在哪里吗?我不明白,因为我刚刚复制了 ReactJS 讲师的代码,他没有收到此错误,但我却收到了。

我的整个代码如下所示:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from 'redux-thunk';

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import burgerBuilderReducer from './store/reducers/burgerBuilder';
import orderReducer from './store/reducers/order';
import authReducer from './store/reducers/auth';

const composeEnhancers = process.env.NODE_ENV === 'development' ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : null || compose;

const rootReducer = combineReducers({
burgerBuilder: burgerBuilderReducer,
order: orderReducer,
auth: authReducer
});

const store = createStore(rootReducer, composeEnhancers(
applyMiddleware(thunk)
));

const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);

ReactDOM.render( app, document.getElementById( 'root' ) );
registerServiceWorker();

更具描述性的错误(在浏览器的控制台中)显示:

Uncaught TypeError: composeEnhancers is not a function
at Object../src/index.js (index.js:23)
at __webpack_require__ (bootstrap 2dae6e05073e9d71bfd6:698)
at fn (bootstrap 2dae6e05073e9d71bfd6:111)
at Object.0 (order.js:59)
at __webpack_require__ (bootstrap 2dae6e05073e9d71bfd6:698)
at bootstrap 2dae6e05073e9d71bfd6:796
at bootstrap 2dae6e05073e9d71bfd6:796

最佳答案

您可能在未安装 Redux DevTools 的浏览器中以开发模式运行应用程序。

问题出在这一行:

const composeEnhancers = process.env.NODE_ENV === 'development' ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : null || compose;

由于运算符优先级规则,这相当于:

const composeEnhancers = process.env.NODE_ENV === 'development' ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : (null || compose);

或者如果您愿意:

let composeEnhancers = null;
if (process.env.NODE_ENV === 'development') {
composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
} else {
composeEnhancers = compose;
}

因此,如果您处于开发模式并且浏览器中没有安装 Redux DevTools 扩展,您的应用程序将会崩溃,因为 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 未定义。你真正需要的是:

let composeEnhancers = null;
if (process.env.NODE_ENV === 'development') {
composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
} else {
composeEnhancers = compose;
}

或者,更简单地说:

const composeEnhancers = (process.env.NODE_ENV === 'development' ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : null) || compose;

关于node.js - "composeEnhancers"不是 ReactJS 中的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57628279/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com