redux 教程：常量存储在 this.props

Question

我正在做 React 教程，视频 #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 时，我有两个元素：store 和 proto，这很清楚。

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 时，我有：（我不明白这个顺序，store objet 是第一个元素？）

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

当我在控制台 'store' 上打印 FilterLink 组件时，我得到：

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

我需要了解更多 "const { store } = this.props"，我不太清楚。

Answer 1

const { store } = this.props 正在使用 ES6 object destructuring.

为右侧的对象分配一个常量，提取与变量同名的键的值（在本例中为store，并将其分配给存储变量。这是相当于

const store = this.props.store

redux 教程：常量存储在 this.props

redux tutorial: const store in this.props

redux

react-redux