Reduxのチュートリアル：コンポーネントの私はチュートリアルをやっているthis.props

Question

でconstの店舗反応し、ビデオ＃24

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

地図：

TodoApp - > VisibleTodoList - > FilterLink

VisibleTodoListとFilterLinkコンポーネントでなぜこのコードが「const {store} = this.props」なのかを知る必要があります。これはthis.propsの最初の要素を取得していますか？一番下のコンソールログにthis.propsとこれらのすべてのコンポーネントのオブジェクトを格納しています。

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); 

私は二つの要素持っているコンソールにVisibleTodoListコンポーネントのthis.propsを印刷するときFilterLink

は：ストアとプロトを、これは明らかです。

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

が、私は私が持っているコンソール上FilterLinkコンポーネントのthis.propsを印刷： （私はいけない、この順序を理解し、店はそれが最初の要素のオブジェ？）

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

私は上の印刷FilterLinkコンポーネント用のコンソール「店舗」、私が手に：私は「のconst {店} = this.props」についての詳細を知っておく必要があり

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

を、それは私のための明確ではありません。

Answer 1

const { store } = this.propsは、ES6 object destructuringを使用しています。右側のオブジェクトのような一定この場合storeに（変数と同じ名前を持つ、ストア変数に割り当てキーの値を引き出すの割り当て

。これは

の等価です

const store = this.props.store