ES6/JSX features explanations

es6Features.md

JSX

[8:52 PM] acemarke: okay. It's important to understand that when you write JSX syntax, like , that gets transformed into normal Javascript
[8:53 PM] acemarke: for example, <MyComponent a={123} b="someString" c={aVariable} /> actually becomes React.createElement(MyComponent, {a : 123, b : "someString", c : aVariable})
[8:53 PM] acemarke: in JSX, angle brackets like <> begin JSX syntax, but curly braces like { } actually escape back to normal Javascript
[8:54 PM] acemarke: for example, I could replace the a prop with, say, <MyComponent a={100 + 20 + 3} />

Computed Properties

8:55 PM] acemarke: so. THAT is an example of a new feature in Javascript ES6
[8:55 PM] acemarke: "computed object properties"
[8:55 PM] acemarke: in ES5, if I want to create an object but use a variable to define the key name, I'd have to do:

var keyName = "a";  
var theObject = {};  
theObject[keyName] = 123;  

[8:56 PM] acemarke: but in ES6, you can do that when you define the object, like:

const theObject = {  
    [keyName] : 123  
};  

[8:56 PM] acemarke: it means "take the value of the variable or expression, and use that to define the key name"
[8:56 PM] acemarke: so I could do, say, { ["user" + 123] : "my name"}, and I'd get {user123 : "my name"}
[8:57 PM] acemarke: so the snippet you linked has an action type defined as a variable
[8:57 PM] acemarke: and it's using the value of that variable as the key name for the object
[8:57 PM] acemarke: so, it's really an ES6 feature, not anything Redux-specific
[8:58 PM] acemarke: but, most code that uses Redux is written using ES6 syntax

Destructuring

9:02 PM] acemarke: it's very common to want to create a local variable that has the value from inside an object, and usually you want the local variable to have the same name as the field in the object
[9:02 PM] acemarke: such as:
[9:02 PM] acemarke:

var theObject = {someField : 123};  
var someField = theObject.someField;  
console.log(someField) // 123  

[9:03 PM] acemarke: ES6 offers new syntax to make that shorter, called "destructuring"
[9:03 PM] acemarke:

const theObject = {someField : 123};  
const {someField} = theObject;  
console.log(someField) // 123  

[9:03 PM] acemarke: and it turns out you can do destructuring with function parameters, too
[9:03 PM] acemarke: so if I had, in ES5:
[9:04 PM] acemarke:

function myFunction(theObject) {  
    var someField = theObject.someField;  
    console.log(someField);  
}  

[9:04 PM] acemarke: in ES6, I could do:
[9:04 PM] acemarke:

function myFunction({someField}) {  
    console.log(someField);  
}  

[9:04 PM] acemarke: basically means, "I don't care about the entire object - just give me one or more fields out of the object, as variables"
[9:05 PM] acemarke: so, in your snippet, the reducer is being passed an object with a field named "user"
[9:05 PM] acemarke: and the reducer is extracting that field and throwing away the rest of the object, as soon as it comes in