Abrufen von Daten mit API-Middleware unter Verwendung eines Arrays von 3 Aktionstypen, action.type ist in Logger und Zustand nur Updates einmal undefined

Question

Ich verwende den Code aus der real world example von offiziellen Redux Guide.

Anstatt drei Aktionen an Reducer zu senden, abhängig von Abruf REQUEST, SUCCESS oder FAILURE, erfolgt dies durch das Absetzen eines Aufrufs mit einem Array der drei Aktionen, die von der API interpretiert werden. Das loadUser() Beispiel ist unten:

import { CALL_API, Schemas } from '../middleware/api.jsx' 

export const USER_REQUEST = 'USER_REQUEST' 
export const USER_SUCCESS = 'USER_SUCCESS' 
export const USER_FAILURE = 'USER_FAILURE' 


function fetchUserAPI(id) { 
    return { 
    [CALL_API]: { 
     types: [ USER_REQUEST, USER_SUCCESS, USER_FAILURE ], 
     endpoint: `/admin/user/${id}`, 
     schema: Schemas.USER 
    } 
    } 
} 

export function loadUser() { 
    return (dispatch, getState) => { 
    let id = getState().auth.user._id 
    return dispatch(fetchUserAPI(id)) 
    } 
} 

Die API-Middleware aus dem Beispiel wie die Folge aussieht:

export default store => next => action => { 

    .... validations... 

    const callAPI = action[CALL_API] 
    let { endpoint } = callAPI 
    const { schema, types } = callAPI 

    function actionWith(data) { 
    const finalAction = Object.assign({}, action, data) 
    delete finalAction[CALL_API] 
    return finalAction 
    } 

    const [ requestType, successType, failureType ] = types 

    next(actionWith({ type: requestType })) 

    return callApiPositions(endpoint, schema).then(
    response => next(actionWith({ 
     response, 
     type: successType 
    })), 
    error => next(actionWith({ 
     type: failureType, 
     error: error.message || 'Something bad happened' 
    })) 
) 
} 

In der Theorie der next(actionWith(..)) Anrufe richtig Dispatching Dinge, eine Anfrage und entweder ein Erfolg/Misserfolg.

jedoch in meiner Konsole Logger, ich sehe nur eine Aktion, die undefined und den Zustand markiert ist, als mindestens die Art und Weise scheint es, den Zustand, in dem Logger gezeigt Inspektion wurde nicht auch immer aktualisiert

Doch in meinem redux DevTool, sehe ich die Handlungen richtig abgefertigt und der Staat scheint aktualisiert werden:

ich gebootet up das offizielle redux-Beispiel, das am Anfang verlinkt ist, und es verwendet den gleichen API-Abruf-Stil und alle Aktionen werden ordnungsgemäß im Logger ausgelöst, als ob es zwei separate Aufrufe wären, so wie es in den redux-Devtools ist.

Ich habe mir bei diesem Problem die Haare ausgezogen, je nachdem, ob ich gerade meine Seite aktualisiert habe oder vom Ausgangspunkt aus angefangen habe, wird der Status möglicherweise aktualisiert. Ich denke, wenn alle Aktionen ordnungsgemäß versandt wurden, dann würde der Staat sicherlich in der Art aktualisiert werden, wie es beabsichtigt ist.

Irgendwelche Vorschläge?

Answer 1

Die Reihenfolge der Middlewares spielt tatsächlich eine Rolle. Sie benötigen logger, um der letzte zu sein.

Im Moment arbeitet Logger vor API. Stellen Sie sicher,

applyMiddleware(api, createLogger()), 

Nicht

applyMiddleware(createLogger(), api),