Question

我有这个组件，需要从Redux存储中获取一些数据。但是，我看到它已经以其他方式传递了一些其他必需的数据。我担心的是在这种情况下如何使用mapStateToProps并获取数据。

这是我需要从redux存储提取数据的组件：

const NavBarScore = withStyles(navBarScoreStyles)(
  ({ classes, matchDetails }) => {
    // some opeartions on matchDetails
    return (
      <span className={classes.middleScoreContainer}>
        <span className={classes.teamName}>{scoreData.homeTeamName}</span>
        <span className={classes.teamName}>{scoreData.awayTeamName} </span>
      </span>
    );
  }
);

我看到其中一个组件中有类似这样的内容，其中CricketFantasy位于rooteReducer之一中：

const NavBarScore = connect(({ cricketFantasy: { matchDetails } }) => ({
  matchDetails
}))(NavScore);

我尝试在另一个组件中执行类似的操作并对其进行访问，但它不显示任何数据。我关心的是如何使用mapstatetoprops从该组件的redux中简单地获取数据。

Answer 1

为NavScore创建一个容器组件，例如NavScoreContainer，它将把事件调度到redux并获取数据并将状态映射到props。

例如：-

const mapStateToProps = (state, ownProps) => {
    return ({
        scores: state.scores
    })
}

const mapDispatchToProps = (dispatch, ownProps) => ({
    fetchScores: () => {
        dispatch(fetchScores());
    }
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(NavScore)

此处得分将作为道具传递给组件，并且可以作为this.props.scores进行访问。

Answer 2

像这样声明您的组件：

const NavBarScore = ({ classes, matchDetails }) => {
    // some opeartions on matchDetails
    return (
      <span className={classes.middleScoreContainer}>
        <span className={classes.teamName}>{scoreData.homeTeamName}</span>
        <span className={classes.teamName}>{scoreData.awayTeamName} </span>
      </span>
    )
  }

带有您的NavBarScore组件的声明，只需通过以下方式将其导出：

export default withStyles(navBarScoreStyles)(connect(({ cricketFantasy: { matchDetails } }) => ({ matchDetails: cricketFantasyMatchDetails }))(NavBarScore))

导入时，它将获取所需的数据，或者仅在同一文件中需要时将其分配给新变量。

const NavBarScoreWithData = withStyles(navBarScoreStyles)(connect(({ cricketFantasy: { matchDetails } }) => ({ matchDetails: cricketFantasyMatchDetails }))(NavBarScore))

这假设您的全局状态为cricketFantasy.matchDetails，否则您可以使用connect(state => state)进行检查和测试

使用mapstatetoprops提取数据

2 个答案: