redux Tutorial: const store in this.props

Question

ich das Tutorial mache reagieren, Video # 24

https://egghead.io/lessons/javascript-redux-passing-the-store-down-explicitly-via-props

Karte von Komponenten:

TodoApp -> VisibleTodoList -> FilterLink

Ich muss nur wissen, warum dieser Code in VisibleTodoList und FilterLink-Komponente: "const {store} = this.props", ist es das erste Element in this.props bekommen? Unten sehen Sie mein Konsolenprotokoll für this.props und speichern Objekt für jede dieser Komponenten.

class VisibleTodoList extends Component { 
    componentDidMount() { 
    const { store } = this.props; 
    this.unsubscribe = store.subscribe(() => 
     this.forceUpdate() 
    ); 
    } 

    componentWillUnmount() { 
    this.unsubscribe(); 
    } 

    render() { 
    const props = this.props; 
    const { store } = props; 

    const state = store.getState(); 

    return (
     <TodoList 
     todos={ 
      getVisibleTodos(
      state.todos, 
      state.visibilityFilter 
     ) 
     } 
     onTodoClick={id => 
      store.dispatch({ 
      type: 'TOGGLE_TODO', 
      id 
      }) 
     } 
     /> 
    ); 
    } 
} 

class FilterLink extends Component { 
    componentDidMount() { 
    const { store } = this.props; 
    this.unsubscribe = store.subscribe(() => 
     this.forceUpdate() 
    ); 
    } 
    . 
    . // Rest of component as before down to `render()` 
    . 
    render() { 
    const props = this.props; 
    const { store } = props 
    const state = store.getState() 
    . 
    . // Rest of component as before 
    . 
    } 
} 

const TodoApp = ({ store }) => (
    <div> 
    <AddTodo store={store} /> 
    <VisibleTodoList store={store} /> 
    <Footer store={store} /> 
    </div> 
); 

const render =() => { 

    ReactDOM.render(
    <TodoApp store={createStore(todoApp)} />, 
    document.getElementById('root') 
); 
}; 

store.subscribe(render); 

FilterLink

Wenn ich this.props für VisibleTodoList Component Druck auf der Konsole i zwei Elemente: store und proto, das ist klar.

Object {store: Object} 
store : Object 
    dispatch : 
    dispatch(action) getState: getState() 
    replaceReducer : replaceReducer(nextReducer) 
    subscribe : subscribe(listener) 
    Symbol(observable) : observable() 
    __proto__ : Object 
__proto__ : Object 

aber wenn ich this.props für FilterLink Komponente auf der Konsole aus, ich habe: (ich verstehe nicht, diese Ordnung, speichern objet es ist das erste Element?)

Object {filter: "SHOW_ALL", store: Object, children: "All"} 
    children : "All" 
    filter : "SHOW_ALL" 
store : Object 
__proto__ : Object 

Wenn ich drucken die Konsole 'Store' für FilterLink Komponente, die ich erhalten:

Object {} 
dispatch : dispatch(action) 
getState : getState() 
replaceReducer :  replaceReducer(nextReducer) 
subscribe : subscribe(listener) 
Symbol(observable) : observable() 
__proto__ : 
Object 

ich brauche mehr darüber zu wissen "const {Speicher} = this.props", dann ist es für mich nicht klar.

Answer 1

const { store } = this.props verwendet ES6 object destructuring.

Zuweisen eine Konstante wie zum Objekt auf der rechten Seite den Wert für den Schlüssel herauszuziehen, die den gleichen Namen wie die Variable (in diesem Fall store und weist sie den Speicher variabel ist. Es ist das Äquivalent von

const store = this.props.store