我看到在redux中的connect中已经完成了这种怪异的方式,并且我很难理解正在做什么以及如何进行。
这是连接代码
export default connect(({ cricketFantasy: { matchDetails } }) => {
let innings = [];
let matchInfo = null;
let currentOver = -1;
let currentPlayer1Id = null;
if (matchDetails && Object.keys(matchDetails).length) {
const {
homeTeam,
awayTeam,
tournament,
gameDateTime,
matchDescription,
venue,
currentInning,
officials,
squad,
toss,
matchState
} = matchDetails;
if (homeTeam && homeTeam.innings && homeTeam.innings.length) {
homeTeam.innings.forEach(inning => {
innings.push({
order: inning.order,
battingTeamName: inning.battingTeam,
isCurrentInning: inning.id === currentInning.id
});
});
}
// some more operations which i deleted as that is not major concern
return {
innings,
matchInfo,
currentOver,
currentPlayer1Id,
currentPlayer2Id,
tournamentId,
squad: squadObj,
matchState: matchStateStr,
isFetchingMatchDetail: false,
routes,
detailsData: matchDetails
};
})(withStyles(styles)(withLocale(CricketScore)));
我尝试在组件的render方法中进行控制台日志操作,但我看到返回的任何内容都可以看作是props。但是,我担心的是({cricketFantasy:{matchDetails}})来自此。我看不到术语cricketFantasy .js文件中此代码所在的任何位置。
我也没有看到任何mapStateToProps。
最佳答案
{ cricketFantasy: { matchDetails } }
是destructuring assignment。
它依赖于包含state
属性的cricketFantasy
,该属性的值是具有matchDetails
属性的对象。
基本上,这只是以下几种形式:const matchDetails = state.cricketFantasy.matchDetails;
要么const { matchDetails } = state.cricketFantasy;
const mapStateToProps = ({ cricketFantasy: { matchDetails } }) =>
console.log({ matchDetails });
const state = {
cricketFantasy: {
matchDetails: "Hello"
}
};
const mapStateToProps2 = (state) => {
const matchDetails = state.cricketFantasy.matchDetails;
console.log({ matchDetails });
};
mapStateToProps(state);
mapStateToProps2(state);