Redux Aktion Argument Versand Unterschied

Question

Meine Dispatch und Aktionen sind zunächst wie folgt, und console.log (action.index) gibt undefined.

onClick={() => this.props.actions.setResultMenu({x})} 


export const setResultMenu = ({index}) => ({ 
    type: SET_RESULT_MENU, 
    index 
}); 

Wenn ich jedoch geändert {x} auf x, alles funktioniert

onClick={() => this.props.actions.setResultMenu(x)} 


export const setResultMenu = (index) => ({ 
    type: SET_RESULT_MENU, 
    index 
}); 

Darf ich kenne den Grund, warum?

Answer 1

Sie missverstanden Destrukturierung und Objektinitiator Shorthand Syntax. Schau dir an, was in jedem deiner Fälle passiert.

die beiden Funktionen lassen haben, eine grundlegende und eine mit geschweiften Klammern um Parameter (das ist Destrukturierung):

function takeArg(arg) { 
    return arg; 
} 

function takeArgDestr({field}) { 
    return field; 
} 

Und obj Objekt:

const obj = { 
    field: 'some field', 
    anotherField: 'another field' 
} 

Hier ist eine grundlegende Fall - Pass Objekt, Drucken Sie es wie folgt aus:

takeArg(obj); 
// { 
//  field: "some field", 
//  anotherField: "another field" 
// } 

Wenn wir Obj mit geschweiften Klammern übergeben, Objekt wie {obj: obj} wird Funktion erstellt und weitergegeben werden (dies ist Objektinitialisierer Stenografie):

takeArg({obj}) 
// { 
// obj: { 
//  field: "some field", 
//  anotherField: "another field" 
// } 
// } 

sehen? Wir haben Objekt mit verschachtelten obj gedruckt.

Als nächstes verwenden wir Funktion mit Destrukturierung, takeArgDestr.

Funktion hat geschweifte Klammern um den Parameter herum, so dass das übergebene Argument destrukturiert wird. Nehmen Sie obj, erhalten field und auszudrucken, um den Wert:

takeArgDestr(obj) 
// "some field" 

Und hier ist Ihr undefined Fall. Wir übergeben Objekt mit geschweiften Klammern, so erstellen verschachtelten Objekt {obj: obj}, und Funktion versucht field von diesem Objekt zu erhalten. Und wir haben dieses Feld dort nicht, so bekam undefined.

takeArgDestr({obj}) 
// undefined 

Sie können mit all diesen Fällen in diesem zupfen spielen:
http://www.webpackbin.com/VyIZ2VsRW

Destrukturierung: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Für Ihren Fall, siehe Abschnitt "Ziehen Felder von Objekten als Funktionsparameter übergeben".

Objekt initialisieren Stenografie: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer