TypeError: промежуточное ПО не является функцией

Я пытаюсь применить redux в своем приложении reactjs. Я не могу продолжить из-за следующих ошибок:

введите описание изображения здесь

введите описание изображения здесь

Я уверен, что уже установил все необходимые мне зависимости. Вот соответствующая часть моего package.json

"dependencies": {
   "react-redux": "^5.0.6",
   "redux": "^3.7.2",
   "redux-logger": "^3.0.6",
   "redux-promise": "^0.5.3",
   "redux-thunk": "^2.2.0",
}

Вот часть моего index.js, которая реализует redux

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import reducers from './reducers';

const logger = createLogger();
const store = createStore(reducers,
    applyMiddleware(
        thunkMiddleware, logger
    )
)

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

reactjs redux react-redux redux-thunk
person James Solomon Belda    schedule 22.10.2017    source источник

Ответы (7)


arrow_upward
44
arrow_downward

Согласно документам, вы смешиваете использование redux-logger

Вам либо нужно импортировать конкретную createLogger функцию

import { createLogger } from 'redux-logger'

const logger = createLogger({
  // ...options
});

Или используйте импорт по умолчанию

import logger from 'redux-logger'

И тогда ваш код должен быть в порядке

const store = createStore(
  reducers,
  applyMiddleware(thunkMiddleware, logger)
)
person Balázs Édes    schedule 22.10.2017
comment
Спасибо за Ваш ответ! использование импорта по умолчанию и передача его в applyMiddleware у меня работает. Также спасибо за ссылку на документ. - person James Solomon Belda; 22.10.2017

arrow_upward
2
arrow_downward

Я не вижу response и response-dom в ваших зависимостях, и он не включен в операторы импорта.

Позвольте мне представить вам пример того, как я недавно создал приложение, также используя инструменты разработчика redux, что потрясающе.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import reduxThunk from 'redux-thunk';
import App from './components/App';
import authReducer from '../reducers/auth';
import urlsReducer from '../reducers/urls';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

//Store creation
  const store = createStore(
    combineReducers({
      auth: authReducer,
      urls: urlsReducer
    }),
    composeEnhancers(applyMiddleware(reduxThunk))
  );

ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );

Я бы подумал, что вам просто нужно добавить регистратор после reduxThunk. А если вы уже объединили свои редукторы, просто предоставьте редукторы вместо combReducers.

С уважением, Рафаэль

person Rafael Sorto    schedule 22.10.2017

arrow_upward
2
arrow_downward

Я получал ту же ошибку TypeError: промежуточное ПО не является функцией.

import { createStore, combineReducers, applyMiddleware } from "redux";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";

import math from "./reducers/mathReducer";
import user from "./reducers/userReducer";

const logger = createLogger();

export default createStore(
  combineReducers({ math, user }),
  {},
  applyMiddleware(logger, thunk)
);

Замена applyMiddleware(logger, thunk) на applyMiddleware(logger, thunk.default) сработала для меня.

person Hassan-Hameed    schedule 03.08.2018

arrow_upward
2
arrow_downward

самый простой способ решить проблему

import * as thunk from 'redux-thunk';



createStore(rootReducer, InitialState, applyMiddleware(thunk.default));
person Erastus ruiru    schedule 05.02.2019

arrow_upward
1
arrow_downward

Пожалуйста, найдите ниже код решения:

const thunkMiddleware = require('redux-thunk').default;

const store = createStore(reducer, applyMiddleware(thunkMiddleware));
person Gagan Sharma    schedule 21.07.2020

arrow_upward
0
arrow_downward

Я пытался добавить logger в список промежуточного программного обеспечения только в разработке, но испортил импорт и получил ту же ошибку. Чтобы исправить мою проблему, мне нужно было добавить .default в require():

const middleware = []

if (process.env.NODE_ENV === 'development') {
  middleware.push(require('redux-logger').default)
}
person SeanMcP    schedule 12.09.2019

arrow_upward
0
arrow_downward

В моем случае я вызывал функцию промежуточного программного обеспечения перед методом хранилища

person Muteshi    schedule 03.01.2021