Anwendung Middleware auf Laden heißt Reducer nicht korrekt in Redux

Question

Ich mache Website mit React + Redux. bevor ich Middleware hinzugefügt habe, funktioniert die Anwendung gut, aber nach dem Hinzufügen wurde der Reducer nicht richtig verteilt.

dies ist mein Code:

import { createStore, applyMiddleware } from 'redux'; 

... 

let createStoreWithMiddleware = applyMiddleware(logger)(createStore); 

let store = createStoreWithMiddleware(appReducer); 

store.dispatch(updateText('text changed.')); 

und dies ist meine Aktion Schöpfer nur oben verwendet:

const UPDATE_TEXT = 'UPDATE_TEXT'; 

function updateText(text = '') { 
    return { 
     type: UPDATE_TEXT, 
     text 
    }; 
} 

und das ist appReducer:

const defaultState = { text: 'default' }; 
function appReducer(state = defaultState, action) { 
    switch(action.type) { 
     case UPDATE_TEXT: 
      return Object.assign({}, state, { 
       text: action.text 
      }); 
     default: 
      return state; 
    } 
} 

wenn ich entfernen Sie einfach applyMiddleware und create store direkt mit createStore wie folgt verwenden:

let store = createStore(appReducer); 

es funktioniert gut! aber ich möchte wirklich Middlewares verwenden. was soll ich machen? jemand gimme eine Hand wird sehr schätzen!

Answer 1

In älteren Versionen von redux-logger (die Sie verwenden können), die ersten Import war eine Funktion, die zuerst wie folgt aufgerufen werden musste:

import createLogger from 'redux-logger' 
const logger = createLogger() 

Dann könnten Sie logger als Middleware verwenden:

... 
const createStoreWithMiddleware = applyMiddleware(logger)(createStore) 
... 

In der aktuellen Version können Sie jedoch einfach import logger from 'redux-logger' und verwenden Sie es so. Wenn Sie einen Logger mit benutzerdefinierten Optionen erstellen möchten, können Sie import { createLogger } from 'redux-logger'.