javascript - 使用 mapstatetoprops 提取数据

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，它会将事件分派(dispatch)到 redux 并获取数据并将状态映射到 props。

例如:-

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

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

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(NavScore)

这里 scores 将作为 prop 传递给组件，并且可以作为 this.props.scores 访问。