Redux 连接状态 shorthand

Question

然而，我发现这个(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 state 的节点。

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

最后在你的函数中，你return一个plain object（可能是使用你从状态中提取的变量构造的），它将与传递的props合并到组件(UserSearch)

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

编辑

第一个参数是 de-structuring 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
 }
}

相当于写

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

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

Redux 连接状态 shorthand

Redux connect with state shorthand

reducers

redux

react-redux