2017-12-26 4 views
0

Ich habe meine Aktionen/Reduzierungen/Speicher usw. erstellt. Wenn ich mapStateToPros an meine Shop-Komponente übergebe, habe ich Zugriff auf meine Requisiten. Speziell für diese Komponente möchte ich this.props.auth verwenden, um den aktuellen Benutzer zu finden, der angemeldet ist. Auf dem Benutzer gibt es eine IsAdmin-Prop, die standardmäßig falsch ist. Wenn ich this.props.auth.isAdmin aufruft, wird null zurückgegeben.Beim Zugriff auf eine Prop in this.props ist der Rückgabewert null?

Mit Knoten/express/mongoDB für mein Backend

localhost error img

Shop Component top img

Shop Component bottom img

Actions for Reducer

Reducer

+0

könnten Sie Ihren Reducer-Code anzeigen? – godsenal

+0

hat den Beitrag bearbeitet. Hinzugefügt die Aktionen und Reduzierer Bilder –

+0

Ist es, weil Ihr Ausgangszustand gleich Null ist? Probleme wie diese lassen sich jedoch problemlos durch Debugging beheben. Im Browser in den Dev-Tools können Sie einfach Breakpoints an allen kritischen Stellen (Reducer, MapStateTrops, etc.) setzen und sehen, wo das Problem liegt –

Antwort

0

der Screenshot von Ihrem Minderer hier https://i.stack.imgur.com/TRvKP.png gegeben, würde ich so etwas wie dies versucht:

// authReducer.js 
const initialState = { 
    auth: { 
    isAdmin: false, 
    }, 
    isLoggedOn: false 
} 

// create a default schema for you state rather than defaulting to null 
export default function (state = initialState, action) { 
    // the rest of your code 
} 

Dies wird Setup Ihren ersten redux Zustandes auf dem Auth Minderer in eine Weise, die entspricht, was von der Komponente erwartet wird.

Für jede Aktion FETCH_USER und LOGOUT_USER, möchten Sie ein Objekt mit einigen Eigenschaften beschreiben den neuen Zustand zurückzukehren, aber Sie es zur Zeit eingerichtet haben, wo LOGOUT_USER kehrt false, die ein ganz anderes Datenformat (boolean) was dann Ich denke, Sie gehen mit der Darstellung des Auth-Zustands (normalerweise möchten Sie ein Objekt).

Mit Zustandsänderungen, eine gemeinsame und handliche Muster ist ein neues Objekt zurückzugeben, die den alten Zustand mit dem neuen übergeht, so könnte man mit so etwas wie dies für eine Aktion am Ende:

case LOGOUT_USER: 
    return { ...state, action.payload } 

Dadurch wird sichergestellt, Ihr Redux-Status entspricht immer einer bestimmten Form und hilft Ihnen, null/undefinierte Fehler für Requisiten in der Komponente zu vermeiden.

Von dort können Sie eine Aktion versenden, um die IsAdmin-Eigenschaft unter anderen Umständen auf "True" zu setzen.

+1

Vielen Dank für die gründliche Erklärung. Das hat perfekt funktioniert. Ein kleiner Tweak war das Umschalten ... state, action.payload in ... state, ... action.payload. Auf jeden Fall half Mutation zu verhindern. Ich kann nicht glauben, dass ich nicht früher daran gedacht habe. –

Verwandte Themen