Redux: der vom Reduzierer empfangene vorherige Zustand hat unerwarteten Typ von "Funktion"

Question

Wenn ich Middleware für Chrome-Erweiterung hinzufüge, funktionieren Reducer nicht mehr richtig vor Ort (aber Chrome/Redux-Debug-Tool funktioniert) + Ich bekomme folgenden Fehler in der Konsole:

Der vom Reduzierer empfangene vorherige Zustand hat eine unerwartete Art von "Funktion". "Auth", "gemeinsam", "home"

Hier Code: Erwartetes Argument ein Objekt mit den folgenden Tasten sein

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; 

Wenn ich Chrom Teil zu entfernen:

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

Wenn wieder normal funktioniert.

Answer 1

createStore dauert bis zu 3 Argumente. Wenn das zweite Argument eine Funktion ist, nimmt es an, dass das zweite Argument der Speichererweiterer ist. Wenn es ein Objekt ist oder gibt es 3 Argumente vorhanden es geht davon aus, dass das Argument ursprünglichen Zustand ist. Siehe here.

Ihre Middleware-Variable ist ein Speicher-Enhancer und die Chrome-Erweiterung ist auch ein Enhancer:

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

Sie haben beide in einer einzigen Funktion zu komponieren:

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; 

Dokumentation hierfür gefunden werden kann here.

Answer 2

createStoreaccepts the following arguments:

• Minderer
• vorbelasteten Zustand
• Enhancer

Wenn nur zwei Argumente geliefert und das zweite Argument ist eine Funktion, wird es dann als ein Verstärker sein. Sehen Sie mehr im source code.

Wenn Sie Redux Devtools verwenden möchten, dann sollten Sie compose es als zusätzlichen Enhancer.

Hoffe, dass hilft. Pozdrav