composeEnhancers не является функцией в ReactJS

23.08.2019Рубрика: ВопросыАвтор: admin

В моем коде появляется следующая ошибка:

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

Post Views: 107

См. также: Забавные персонажи до и в конце журналов с помощью Google Cloud Winston Logging (Nodejs)

2 node.js npm

Комментарии: 2

Kevdog777 24.08.2019 в 00:00
Скорее всего, вы запускаете свое приложение в режиме разработки в браузере, в котором не установлен 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;
```
Сработало отлично !!!! Он был сломан в сафари и работал на Chrome, но вполне вероятно, что у пользователя не установлен redux devtools. — person Kevdog777; 24.07.2020

Вы спасли мою жизнь. Спасибо! — person Kevdog777; 02.11.2020

Вы правы, я запустил localhost: 3000 в инкогнито и получил эту ошибку, когда я переключаюсь на свою учетную запись Chrome с установленным инструментом redux dev, он работает — person Kevdog777; 07.11.2020

РЖУ НЕ МОГУ! У меня была такая же ошибка из той же проблемы и конечно. Инструктор попросил меня сравнить мой код с его, но не поднял эту потенциальную проблему! В этом и заключается проблема, и я очень благодарен вам за добавление этого решения! — person Kevdog777; 08.01.2021
Ответить
Kevdog777 13.02.2020 в 00:00
Обновление 2020

С помощью оператора Элвиса (или безопасной навигации), который был представлен в TypeScript 3.8, можно упростить его и сделать его намного лучше. Как показано ниже:
```
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), а откат оценивает
Не удается найти имя «окно». куда я мог импортировать это? — person Kevdog777; 02.07.2020
Ответить

Добавить комментарий