我正在做教程反应,视频#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和store对象。
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
当我在控制台上为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 Component的this.props时,我有: (我不理解这个顺序,存储objet它是第一个元素吗?)
Object {filter: "SHOW_ALL", store: Object, children: "All"}
children : "All"
filter : "SHOW_ALL"
store : Object
__proto__ : Object
当我在FilterLink Component的控制台“store”上打印时,我得到:
Object {}
dispatch : dispatch(action)
getState : getState()
replaceReducer : replaceReducer(nextReducer)
subscribe : subscribe(listener)
Symbol(observable) : observable()
__proto__ :
Object
我需要了解更多关于“const {store} = this.props”的信息,这对我来说并不清楚。
答案 0 :(得分:5)
const { store } = this.props
正在使用ES6 object destructuring。
为右侧的对象分配一个常量,拉出与变量同名的键的值(在本例中为store
,并将其赋值给商店变量。&#39;
const store = this.props.store