Redux连接状态简写

Question

我在看this example。

但是，我发现这个（containers/UserSearch.jsx）很难理解：

export default connect(
  ({ routing, userResults, searchInFlight }) => ({
    query: routing.locationBeforeTransitions.query.q,
    results: userResults,
    searchInFlight
  }),
  { searchUsers }
)(UserSearch);

关键是，routing减速机甚至没有导入。那个假定的mapStateToProps函数怎么可能？

请帮忙解释一下。感谢。

Answer 1

如果查看connect api，它会描述以下参数传递给它。

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

第一个是mapStateToProps，在你的情况下是一个函数。

({ routing, userResults, searchInFlight }) => ({
 query: routing.locationBeforeTransitions.query.q,
 results: userResults,
 searchInFlight
})

此函数的第一个参数是整个redux状态。您的语法{ routing, userResults, searchInFlight }被称为Destructuring assignment，您只从州中选择所述变量。因此routing，userResults，searchInFlight都是您的redux状态的节点。

在创建状态时routing之前routingReducer添加了combineReducers节点。所以这里routing只是您所在州的一个节点，它保存RoutingReducer指定的路由相关数据，而不是路由减少器本身。

最后在函数内部，返回plain object（可能是使用从状态中提取的变量构造的），它将与传递给Component的props合并（{{ 1}}）

这就是为什么参数被命名为UserSearch的原因，它表示您使用或不使用操作映射redux状态，并根据需要将其作为道具传递给组件。

修改

第一个参数是de-structuring mapStateToProps对象，并将提到的值提取到单独的变量中。以下代码可以互换。

state

相当于写

({ routing, userResults, searchInFlight }) => ({
 query: routing.locationBeforeTransitions.query.q,
 results: userResults,
 searchInFlight
})

相当于写

(state) => {
 let routing = state.routing;
 let userResults = state.userResults;
 let searchInFlight = sate.searchInFlight;
 return {
  query: routing.locationBeforeTransitions.query.q,
  results: userResults,
  searchInFlight: searchInFlight
 }
}

解构赋值只是提取所需值并将其分配给您可以使用的局部变量的简写。我没有看到性能问题。我能看到的唯一优势是，即使状态有1000个属性，我们只检索我们需要的属性并使用它们。