перевождь учебник: Const магазин в this.props

Question

я делаю учебник среагировать, видео # 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? чтобы увидеть внизу мой консольный журнал для этого.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); 

FilterLink

При печати this.props для VisibleTodoList компонента на консоли у меня есть два элемента: магазин и прото, это ясно.

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

, но когда я печатаю this.props для FilterLink компонента на консоли у меня есть: (я не понимаю, этот заказ, магазин Objet это первый элемент?)

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

При печати на консоль «магазин» для FilterLink компонент, я получаю:

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

мне нужно знать больше о «сопз {магазин} = this.props», это не ясно для меня.

Answer 1

const { store } = this.props использует ES6 object destructuring.

Назначение постоянная, как к объекту на правой стороне вытащить значение ключа, который имеет такое же имя, что и переменные (в данном случае store и присваивает его переменный магазин. Это эквивалентно

const store = this.props.store