подключайся в режиме без использования карты и получай все как реквизит

Question

Я вижу этот странный способ, которым все было сделано в соединении в редуксе, и мне трудно понять, что делается и как. Вот код подключения

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

Я попытался утешить журнал в методе рендеринга компонента, и я вижу, что все, что было возвращено, может рассматриваться как реквизит. Однако меня беспокоит то, что из ({cricketFantasy: {matchDetails}}) это пришло. Я не Термин cricketFantasy не может быть где-либо в файле .js, где находится этот код. Также я не вижу никаких mapStateToProps.

Answer 1

{ cricketFantasy: { matchDetails } } - это деструктурирующее присвоение .

. Оно опирается на 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);