在 Redux 'compose' 中使用 React.js 道具答案

【问题标题】：Using React.js props on Redux's 'compose'在 Redux 'compose' 中使用 React.js 道具
【发布时间】：2019-02-04 12:16:38
【问题描述】：

我正在使用 react-redux-firebase 和 firestoreConnect 从我的数据库中获取信息，并通过他们预制的 reducer 将其映射到 props 中。要将其信息连接到我的组件，我以下列方式使用 'compose' 方法：

export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   firestoreConnect([
      {
         collection: 'questions',
         doc: this.props.match.params.id,
         subcollection: 'messages',
      }
   ])
)(QuestionDetail);

如您所见，我正在尝试访问具有 ID 的特定文档，该 ID 作为来自其父级的道具传递给组件。但是，“this”在“compose”的上下文中是未定义的，因此我不能使用它来访问道具和我的参数。

有没有其他方法可以访问传递给组件的 id，以便我可以向 Firestore 请求它？

【问题讨论】：

标签： reactjs firebase redux google-cloud-firestore

【解决方案1】：

通过文档进行更深入的搜索后，我发现您可以将道具传递给 firestoreConnect 函数（另请注意，我以错误的方式查询子集合）。代码最终是：

export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   firestoreConnect((props) => [
      {
         collection: 'questions',
         doc: props.match.params.id,
         subcollections: [{ collection: 'messages' }],
      }
   ])
)(QuestionDetail);

【讨论】：

【解决方案2】：

它应该适用于旧版本的react-router。

但我假设您使用的是最新版本的 React Router (v4+)。所以你必须用“withRouter”高阶组件包裹整个组件。每当渲染时，它都会将更新的匹配、位置和历史道具传递给包装的组件。

首先，你必须导入withRouter。

import { withRouter } from "react-router";

然后你必须用 withRouter 包裹它。

export default withRouter(compose(
   connect(mapStateToProps, mapDispatchToProps),
   firestoreConnect((props) => 
      [{
         collection: 'questions',
         doc: props.match.params.id,
         subcollections: [{ collection: 'messages' }],
      }]
      ))(QuestionDetail));

这对我有用。

【讨论】：