ES6 double destructure

It means

const {rootStore} = this.props
const {routerStore} = rootStore

Except the first line will not effect, which is rootStore will not be defined.

const { rootStore: { routerStore } } = this.props;

Just to add my part, the above code actually means the following

const { routerStore } = this.props.rootStore;

not the following:

const {rootStore} = this.props
const {routerStore} = rootStore

the difference is that the first one only defines one constant routerStore whereas the second one defines two constants rootStore and routerStore. so there is little difference.

This is called nested destructuring and its very useful in many situations

let's understand it bit by bit ,

look at this example

const person = {
    friend: {
        name: 'john',
        age: 20,
    },
};

const { friend } = person;

console.log(friend);

here we get the value of the prop friend using destructuring and the value itself is an object and we can use destructring with it as well ,

from the previous example

const person = {
    friend: {
        name: 'john',
        age: 20,
    },
};

const { friend } = person;

console.log(friend);

const {age} = friend ;

console.log(age) ; 

now we get the age prop using destructuring as well and that's pretty and super handy , but what if I just need the age prop and I don't need the friend prop , can I do all the above example in one step , Yes !! and that's the awesomeness of ES6 ,

const person = {
    friend: {
        name: 'john',
        age: 20,
    },
};

const { friend :{age} } = person;

console.log(age); 

as you can see we get the value of age in one step and that's useful in many situations when you have nested objects , in the code above if you try to log the value of friend you'll get ReferenceError: friend is not defined ,

Did you know ? you can make deep nested destructuring as you want , look at this complex example which is just for fun .

const person = {
    friend: {
        name: 'john',
        other: {
            friend: {
                name: {
                    fullName: {
                        firstName: 'demo',
                    },
                },
            },
        },
    },
};

const {
    friend: {
        other: {
            friend: {
                name: {
                    fullName: { firstName },
                },
            },
        },
    },
} = person;

console.log(firstName); // demo

pretty !!

if you want to know everything about destructuring look at this resources

Destructuring assignment MDN

Destructuring and parameter handling in ECMAScript 6

When destructuring an object, the part on the left side of the colon is the property name and the part on the right side is what the property value is destructured into. (Shorthand works as it does in an object literal, where { x } is equivalent to { x: x }.) This target is declared or assigned to according to where the destructuring appears:

const { x: y } = z;
// equivalent to:
const y = z.x;

let { x: y } = z;
// equivalent to:
let y = z.x;

({ x: y }) = z;
// equivalent to:
y = z.x;

where y can be another pattern. So this:

const { rootStore: { routerStore } } = this.props;

is equivalent to:

const { routerStore } = this.props.rootStore;

which is also how I would write it if only using the one property. You can read the colon as “into” if that helps.