Question

关注Redux文档中的example async app，我真的不明白组件AsyncApp如何访问提取异步的帖子。

function mapStateToProps(state) {
 const { selectedSubreddit, postsBySubreddit } = state
  const {
    isFetching,
    lastUpdated,
    items: posts
  } = postsBySubreddit[selectedSubreddit] || {
    isFetching: true,
    items: []
  }
 
  return {
    selectedSubreddit,
    posts,
    isFetching,
    lastUpdated
  }
}

问题：

1 - 这个表达式是什么：postsBySubreddit[selectedSubreddit]？使用括号访问功能？这是否使用posts

中的道具const { selectedSubreddit, posts, isFetching, lastUpdated } = this.props设置了该组件

2 - 他们可以发送<Posts posts={posts} />，但他们从哪里获取这些帖子！？为什么他们是道具的一部分！？

Answer 1

这个表达是什么：postsBySubreddit[selectedSubreddit]？使用括号访问函数？

不，postsBySubreddit 不是函数，它基本上是一个对象，[]（括号表示法）用于通过某个动态键访问对象值。

检查此代码段：

＆＃13;

let obj = {a:1, b:2};
let k = 'b';                  //k will have the property name
console.log('value of b = ', obj[k]);

＆＃13;

根据MDN Doc：

属性访问器通过使用提供对对象属性的访问点符号或括号表示法。

您对Destucturing和Short-Circuit Evaluation感到困惑，看看到底发生了什么：

const selectedSubreddit = state.selectedSubreddit; 
const postsBySubreddit = state.postsBySubreddit;

const data = postsBySubreddit[selectedSubreddit] || { isFetching: true, items: []}
const isFetching = data.isFetching; 
const lastUpdated = data.lastUpdated; 
const lastUpdated = data.lastUpdated;

他们首先从哪里获得这些帖子！？

这些值是从redux商店传递的。 mapStateToProps将商店作为第一个参数，从那里我们可以访问任何数据。我们使用Provider将商店数据提供给所有连接的组件。

根据 DOC ：

Provider使Redux存储可用于connect中的connect（）调用组件层次结构通常，您不能使用connect（）在<Provider>
中包装父组件或祖先组件

组件如何从redux商店获取数据？

1 个答案: