webentwicklung-frage-antwort-db.com.de

TypeError: Middleware ist keine Funktion

Ich versuche, Redux in meiner Reaktjs-App anzuwenden. Ich kann wegen dieser Fehler nicht fortfahren:

 enter image description here

 enter image description here

Ich bin mir sicher, dass ich bereits alle Abhängigkeiten installiert habe, die ich brauche. Hier ist ein relevanter Teil meines 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",
}

Hier ist ein Teil meiner index.js, der redux implementiert

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

Entsprechend den docs mischen Sie die Verwendung von redux-logger

Sie müssen entweder die spezifische createLogger-Funktion importieren

import { createLogger } from 'redux-logger'

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

Oder verwenden Sie den Standardimport

import logger from 'redux-logger'

Und dann sollte dein Code in Ordnung sein

const store = createStore(
  reducers,
  applyMiddleware(thunkMiddleware, logger)
)
24
Balázs Édes

In Ihren Abhängigkeiten sehe ich nicht reagieren und reagieren, und es ist nicht in den Importanweisungen enthalten.

Lassen Sie mich Ihnen ein Beispiel dafür geben, wie ich kürzlich eine App erstellt habe, auch mit den Redux-Entwicklerwerkzeugen, was erstaunlich ist.

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

Ich würde mir vorstellen, dass Sie nach reduxThunk nur noch Logger hinzufügen müssen. Und wenn Sie Ihre Reduzierstücke bereits kombiniert haben, dann stellen Sie einfach Reduziergetriebe anstelle von Kombiniergetriebe bereit.

Grüße, Rafael

1
Rafael Sorto

Ich habe versucht, logger nur in der Entwicklung zur Liste der Middleware hinzuzufügen, habe aber den Import durcheinander gebracht und den gleichen Fehler erhalten. Um mein Problem zu beheben, musste ich der require().default Hinzufügen:

const middleware = []

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

Ich habe den gleichen Fehler TypeError erhalten: Middleware ist keine Funktion

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) durch applyMiddleware(logger, thunk.default) zu ersetzen, hat für mich funktioniert.

0
Hassan-Hameed

der einfachste Weg, das Problem zu beheben

import * as thunk from 'redux-thunk';



createStore(rootReducer, InitialState, applyMiddleware(thunk.default));
0
Erastus ruiru