TypeError: 미들웨어가 함수가 아닙니다.

TypeError: 미들웨어가 함수가 아닙니다.

리액션 앱에서 리덕스를 적용하려고 합니다.다음 오류로 인해 계속할 수 없습니다.

필요한 의존관계는 이미 모두 설치했습니다.여기 제 패키지의 관련 부분이 있습니다.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",
}

다음은 redex를 구현하는 인덱스.js의 일부입니다.

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')
);

사용법을 혼동하고 있는 문서에 따르면redux-logger

특정 항목을 Import해야 합니다.createLogger기능.

import { createLogger } from 'redux-logger'

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

또는 기본 가져오기 사용

import logger from 'redux-logger'

그럼 코드도 괜찮고

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

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)날 위해 일했어

문제를 해결하는 가장 쉬운 방법

import * as thunk from 'redux-thunk';



createStore(rootReducer, InitialState, applyMiddleware(thunk.default));

import logger from 'redux-logger';
import thunk from 'redux-thunk';
import reduxPromiseMiddleware from 'redux-promise-middleware';
import { applyMiddleware, createStore } from 'redux';

const middleware = applyMiddleware(reduxPromiseMiddleware, thunk, logger);
const store = createStore(reducer, middleware);

귀사의 의존관계에는 리액트 및 리액트 도메인이 없으며 Import 명세서에 포함되지 않습니다.

최근 앱을 어떻게 실행했는지, 또한 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')
    );

redexThunk 다음에 logger만 추가하면 될 것 같습니다.또한 이미 리듀서를 조합한 경우에는 combine Reducers 대신 리듀서를 제공합니다.

안녕하세요, 라파엘

솔루션의 코드는 다음과 같습니다.

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

const store = createStore(reducer, applyMiddleware(thunkMiddleware));

createStore 함수에 .default를 추가하여 Middleware is not function(미들웨어가 함수가 아닙니다) 오류를 해결합니다.

추가하려고 했는데logger개발 중인 미들웨어 목록에만 포함되었지만 Import가 잘못되어 동일한 오류가 발생하였습니다.이 문제를 해결하기 위해 다음 사항을 추가해야 합니다..default에게require():

const middleware = []

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

내 경우 스토어 방식 전에 미들웨어 함수를 호출하고 있었다.

나도 같은 문제가 있었는데, 위에서 @anisur-rahman이 제안한 것이 나에게 효과가 있었다.나는 방금 에서 변경했다.applyMiddleware(logger) to applyMiddleware(logger.default)이것이 도움이 되기를 바라며, 해결책에 대해 @anisur-rahman에게 많은 감사를 표합니다.

언급URL : https://stackoverflow.com/questions/46869671/typeerror-middleware-is-not-a-function