web-dev-qa-db-fra.com

TypeError: le middleware n'est pas une fonction

J'essaie d'appliquer redux dans mon application reactjs. Je ne peux pas continuer à cause de ces erreurs:

 enter image description here

 enter image description here

Je suis sûr d'avoir déjà installé toutes les dépendances dont j'ai besoin. Voici une partie pertinente de mon 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",
}

Voici une partie de mon index.js qui implémente 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')
);
reactjsreduxreact-reduxredux-thunk
12
James Solomon Belda

Selon les docs vous mélangez l’utilisation de redux-logger

Vous devez soit importer la fonction createLogger spécifique

import { createLogger } from 'redux-logger'

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

Ou utilisez l'importation par défaut

import logger from 'redux-logger'

Et puis votre code devrait bien se passer

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

Je ne vois pas réagir et réagir-dom dans vos dépendances, et il n'est pas inclus dans les déclarations d'importation.

Permettez-moi de vous donner un exemple de la façon dont j'ai récemment créé une application, en utilisant également les outils de développement redux, ce qui est incroyable.

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

Je suppose que vous avez juste besoin d'ajouter un enregistreur, après reduxThunk. Et si vous avez déjà combiné vos réducteurs, fournissez simplement des réducteurs au lieu de combineRéducteurs.

Cordialement, .__ Rafael

1
Rafael Sorto

Je recevais la même erreur TypeError: le middleware n'est pas une fonction . 

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

Remplacer applyMiddleware(logger, thunk) par applyMiddleware(logger, thunk.default) a fonctionné pour moi.

0
Hassan-Hameed

le moyen le plus simple de résoudre le problème

import * as thunk from 'redux-thunk';



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