Question

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

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

Answer 1

您可能会在未安装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;

Answer 2

2020更新

使用TypeScript 3.8中引入的Elvis（或安全导航）运算符，可以简化它并使它看起来更好。如下所示：

const composeEnhancers =
  (process.env.NODE_ENV === 'development' &&
    (window as any)?.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
  compose;

这意味着：

elvis运算符检查是否定义了window?.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
如果不存在，则求值为undefined，因此代码的第一部分将返回false（如果我们处于开发模式-> true && undefined = false），并进行后备求值

“ composeEnhancers”不是ReactJS中的函数

2 个答案: