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

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

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

См. также:  Как запустить экземпляр контейнера с помощью API Azure?
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 2
  1. Kevdog777

    Скорее всего, вы запускаете свое приложение в режиме разработки в браузере, в котором не установлен 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

  2. Kevdog777

    Обновление 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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: