Как я могу редактировать или манипулировать данными, которые я получаю в моем состоянии перед рендерингом данных

Question

Я создаю приложение с использованием response и redux

После перехода к новому URL-адресу выполняется вызов API, и данные теперь существуют в состоянии контейнеров.

То, что я хочу сделать, - это использовать данные API в дочернем компоненте (FixtureList). Я хочу провести рефакторинг данных.Где я могу это сделать и как мне это сделать? Ниже приведен пример данных:

Пример данных - пожалуйста, нажмите здесь

Из данныхНапример, вы можете видеть, что у нас есть ключ с именем matchday. Я хочу сгруппировать все объекты по дню матча, в котором они находятся , а затем выполнить рендеринг в интерфейс.

React Container

import React, { Component } from 'react';
import { connect } from 'react-redux';

import FixtureList from '../components/league-fixture-list';


class LeagueFixtures extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-12">
            <h2>Fixtures</h2>
          </div>
        </div>
        <div className="row">
          {this.props.leagueFixtures.fixtures.map((fixture, index) => {
            return <FixtureList fixture={fixture} matchday={fixture.matchday} key={index}/> 
          })}
        </div>
      </div>
    )
  }
}  
const mapStateToProps = (state) => ({
  leagueFixtures: state.LeagueFixtures
})

const mapDispatchToProps = (dispatch) => {
  return {
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LeagueFixtures)

React Component

import React from 'react'


const FixtureList = (props) => {

  return (
    <div className="col-sm-4">
      <li className="list-group-item">
        {props.matchday}
        {props.fixture.homeTeamName} vs {props.fixture.awayTeamName}
      </li>
      <p></p>
    </div>
  );
}

export default FixtureList;

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

Спасибо

Answer 1

вы можете использовать повторно выбрать . По сути, вы пытаетесь получить производные данные, которые могут быть вычислены на основе исходных данных, возвращаемых с сервера.
Повторный выбор действительно облегчает плюс кеширование результата, поэтому до тех пор, пока исходные данные не изменяются, полученные данные не пересчитываются (в настоящее время это происходит при каждом рендеринге).

Возможная реализация будет выглядеть примерно так: (для простоты используется lodash)

import { createSelector } from 'reselect';
import { keyBy } from 'lodash';

const fixtures = state => state.LeagueFixtures

const fixturesByMatchDaySelector = createSelector(
  fixtures,
  (fixtures) => keyBy(fixtures, ({matchday}) => matchday),
) 

const mapStateToProps = (state) => ({
  leagueFixtures: state.LeagueFixtures,
  fixturesByMatchDay: fixturesByMatchDaySelector(state)
})

Надеюсь, это поможет [=