1.8 KiB
1.8 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24c314108439a4d4036145 | 映射 State 到 Props | 6 | 301433 | map-state-to-props |
--description--
Provider
可向 React 组件提供state
和dispatch
,但你必须确切地指定所需要的 state 和 actions,以确保每个组件只能访问所需的 state。完成这个任务,你需要创建两个函数:mapStateToProps()
、mapDispatchToProps()
。
在这两个函数中,声明 state 中函数所要访问的部分及需要 dispatch 的创建 action 的函数。完成这些,我们就可以迎接下一个挑战,学习如何使用 React Redux 的connect
方法来把函数连接到组件了。
注意: 在幕后,React Redux 用store.subscribe()
方法来实现mapStateToProps()
。
--instructions--
创建mapStateToProps()
函数,以state
为参数,然后返回一个对象,该对象把 state 映射到特定属性名上,这些属性能通过props
访问组件。由于此示例把 app 应用的整个状态保存在单一数组中,你可把整个状态传给组件。在返回的对象中创建messages
属性,并设置为state
。
--hints--
常量state
应为空数组。
assert(Array.isArray(state) && state.length === 0);
mapStateToProps
应为函数。
assert(typeof mapStateToProps === 'function');
mapStateToProps
应返还一个对象。
assert(typeof mapStateToProps() === 'object');
把 state 数组传入mapStateToProps
后应返回赋值给messages
键的数组。
assert(mapStateToProps(['messages']).messages.pop() === 'messages');
--seed--
--seed-contents--
const state = [];
// Change code below this line
--solutions--
const state = [];
// Change code below this line
const mapStateToProps = (state) => {
return {
messages: state
}
};