使用 withStyles() 和 compose() 和 Redux/Firebase/Material UI 导出组件答案

【问题标题】：Export component using withStyles() and compose() with Redux/Firebase/Material UI使用 withStyles() 和 compose() 和 Redux/Firebase/Material UI 导出组件
【发布时间】：2019-09-26 20:53:31
【问题描述】：

所以我正在尝试将这个应用程序放在一起，使用 firebase 和 redux 进行存储，并使用 Material UI 作为设计。我已经让 firebase 和 firestore reducer 正常工作，但当我尝试同时使用 firebase 和 withStyles() 导出组件时遇到了问题；

（它单独工作，当我尝试同时使用时会引发错误。）

这是我尝试过的：

这可行，但 withStyles() 不存在。

export default compose(
  firebaseConnect([{ collection: 'clients' }]),
  connect(mapStateToProps),
)(Clients);

这可行，但它没有连接到 firebase。

export default connect(mapStateToProps)(withStyles(styles)(Clients));

我尝试将它们组合在一起，但每个都抛出一个错误。

export default compose(
  firebaseConnect([{ collection: 'clients' }]),
  connect(mapStateToProps),
)(withStyles(styles)(Clients));

export default compose(
  firebaseConnect([{ collection: 'clients' }]),
  connect(mapStateToProps),
  withStyles(styles, {
    name: 'Clients',
  }),
)(Clients);

抛出的错误是Uncaught Error: Path is a required parameter within definition object

任何帮助将不胜感激。谢谢！

【问题讨论】：

如果你尝试制作 firebase 并连接到变量中，然后组合它们呢？我过去为 redux 和 apollo 做过。 const withFirebase = firebaseConnect([{ collection: 'clients' }]); const withConnect = connect(mapStateToProps); export default compose(withFirebase, withConnect)(withStyles(styles)(Clients));
@BrandonMitchell 谢谢，刚刚尝试过，但它仍然抛出同样的错误......我想也许我应该在更高的组件上连接到 Firebase，比如 App，然后通过通过道具获取firebase数据。这样，我不会在 withStyles() 和 firebaseConnect() 之间有重叠

标签： reactjs firebase redux react-redux material-ui

【解决方案1】：

好的，经过一番折腾，我想通了。我必须将 firebaseConnect() inside 放置在连接的内部，通常是操作所在的位置。

const withFirebase = firebaseConnect([{ collection: 'clients' }]);

export default connect(mapStateToProps, withFirebase)(withStyles(styles)(Clients));

【讨论】：