Probleme beim Verständnis haben React Syntax

Question

Ich versuche zu verstehen React & Redux besser. In letzter Zeit habe ich hier die Beispiele wurden unter Verwendung von: https://github.com/reactjs/redux/blob/master/examples/shopping-cart/src/reducers/products.js
Ich habe Schwierigkeiten, diese Zeilen zu erfassen: ... action.products.reduce ((obj, Produkt) => { obj [product.id] = Produkt return obj }, {})

und [productId]: Produkte (Zustand [productId], action)

Kann jemand erklären, was passiert, bitte?

const byId = (state = {}, action) => { 
    switch (action.type) { 
    case RECEIVE_PRODUCTS: 
     return { 
     ...state, 
     ...action.products.reduce((obj, product) => { 
      obj[product.id] = product 
      return obj 
     }, {}) 
     } 
    default: 
     const { productId } = action 
     if (productId) { 
     return { 
      ...state, 
      [productId]: products(state[productId], action) 
     } 
     } 
     return state 
    } 

Answer 1

Ihre Frage ist rater unklar, aber ich werde versuchen, die besten meiner Fähigkeiten zu beantworten. Die ... (drei Punkte) wird die spread operator genannt und es ist eine Möglichkeit, ein Objekt (oder Array) in ein anderes Objekt (oder Array) "zu verschmelzen". Hier ein Beispiel:

const objA = { 
    field_1: "my value", 
    field_2: "my other value" 
}; 
const newObject = { 
    ...objA, 
    field_3: "my third value" 
}; 
console.log(newObject); // { 
         // field_1: "my value", 
         // field_2: "my other value", 
         // field_3: "my third value" 
         // } 

Es ist im Grunde entspricht der folgenden:

const objA = { 
    field_1: "my value", 
    field_2: "my other value" 
}; 
const newObject = Object.assign({}, objA, { field_3: "my third value" }); 

Es gibt viel mehr zu bieten als mein Beispiel, so finden Sie in der Dokumentation.

Die [productId]: products(state[productId], action) ist eine Möglichkeit, eine Variable als Objektschlüssel zu verwenden. Das wäre in etwa gleichwertig sein:

let objA = { 
    field_1: "my value", 
}; 
const myKey = "field_2"; 
objA[myKey] = "my other value"; 

Technisch ist es nicht Reagieren Syntax, aber rater ES6-7 Syntax.