извлечение данных с помощью mapstatetoprops

Question

У меня есть этот компонент, где мне нужны данные из моего магазина Redux.Тем не менее, я вижу, что некоторые другие необходимые данные были переданы немного по-другому.Меня беспокоит то, как использовать mapStateToProps в этом случае и получать данные.

Вот компонент, в котором мне нужно извлечь данные из хранилища избыточных данных:

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);

Я попытался сделать аналогичную вещь в другом компоненте и получить к нему доступ, но он не показывает никаких данных.Меня беспокоит то, как просто получить данные из RedEx в этом компоненте с помощью mapstatetoprops.

Answer 1

объявите ваш компонент так:

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)

Answer 2

Создайте контейнерный компонент для NavScore, скажем, NavScoreContainer, который будет отправлять события для редукции и извлекать данные и отображать состояние в реквизиты.

Например: -

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

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

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(NavScore)

Здесь баллы будет передано как компонент в компонент и может быть доступно как this.props.scores.