web-dev-qa-db-fra.com

Redux: l'état précédent reçu par le réducteur a un type de "Fonction" inattendu

Lorsque j'ajoute un middleware pour chrome, les réducteurs cessent de fonctionner correctement sur le site (mais l'outil de débogage chrome/redux fonctionne) + j'obtiens l'erreur suivante dans la console:

L'état précédent reçu par le réducteur a un type de "Fonction" inattendu. L'argument attendu doit être un objet avec les clés suivantes: "auth", "common", "home"

Voici le code:

import { applyMiddleware, createStore } from 'redux';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducer';

const middleware = applyMiddleware(promiseMiddleware, localStorageMiddleware);

const store = createStore(reducer, middleware,
      window.devToolsExtension ? window.devToolsExtension() : f => f);

export default store;

Si je supprime chrome part:

,window.devToolsExtension ? window.devToolsExtension() : f => f

Si fonctionne à nouveau normalement.

reactjsreduxreact-redux
22
Nema Ga

createStore prend jusqu'à 3 arguments. Si le deuxième argument est une fonction, il suppose que votre deuxième argument est le renforceur de magasin. S'il s'agit d'un objet ou il y a 3 arguments présents il suppose que l'argument est votre état initial . Voir ici .

Votre variable middleware est un amplificateur de magasin et l'extension chrome est également un amplificateur:

window.devToolsExtension ? window.devToolsExtension() : f => f

Vous devez composer les deux dans une seule fonction:

import { applyMiddleware, createStore, compose } from 'redux';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducer';

const middleware = applyMiddleware(promiseMiddleware, localStorageMiddleware);

const store = createStore(
  reducer,
  compose(middleware, window.devToolsExtension ? window.devToolsExtension() : f => f)
);

export default store;

La documentation pour cela peut être trouvée ici .

50
Herku

createStoreaccepte les arguments suivants :

  • réducteur
  • état préchargé
  • exhausteur

Si seulement deux arguments sont fournis et que le deuxième argument est une fonction, alors il est considéré comme un amplificateur. Voir plus dans le code source .

Si vous voulez utiliser les devtools de Redux, alors vous devez compose en tant qu'améliorateur supplémentaire.

    import { applyMiddleware, createStore, compose } from 'redux';

    const store = createStore(
      reducer,
      compose(
        middleware,
        window.devToolsExtension ? window.devToolsExtension() : f => f
      )
    )

J'espère que cela pourra aider. Pozdrav ????

16
Grgur