Как правильно сообщить компоненту Movie, что тот или иной фильм рекомендован?

Question

[lexstile]

state: https://dropmefiles.com/cGo3r
Есть компоненты:
Movie - выводит один фильм
MovieList - выводит список Movie
Каким образом компонент Movie может узнать, что тот или иной фильм рекомендован, если рекомендации идут отдельным объектом и имеют только ссылку на id?
App

class AppComponent extends React.PureComponent<AppComponentPropsType> {
  render() {
    return (
      <React.Fragment>
        <Header>
          React Movie Cards
        </Header>
        <MovieList movies={this.props.movies} />
      </React.Fragment>
    );
  }
}

MovieList

export class MovieList extends React.PureComponent<MovieListPropsType> {
  render() {
    const { movies } = this.props;
    return (
      <div className="mt-5">
        <div className="card-deck">
          {movies && movies.map(movie => (
            <Movie movie={movie} key={movie.id} />
          ))}
        </div>
      </div>
    );
  }
}

Movie

export class Movie extends React.PureComponent<MoviePropsType> {
  render() {
    const { movie } = this.props;
    return (
      <div className="movie-card">
        <div className="movie-card card">
          <img className="card-img-top" src={movie.imageUrl} alt={movie.title} />
          <div className="card-body">
            <h4 className="card-title">{movie.title}</h4>
            <h6 className="card-subtitle mb-2 text-muted">{movie.subtitle}</h6>
            <p className="text-justify movie-descr">{movie.description}</p>
          </div>
          <div className="card-footer">
            <div className="clearfix">
              <div className="float-left mt-1">
                <StarRating rating={movie.rating} />
              </div>
              <div className="card-footer-badge float-right badge badge-primary badge-pill">{movie.rating}</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Мне нужно, в зависимости от того, рекомендован фильм или нет - стилизировать Movie, как можно подготовить данные для компонента Movie, чтобы ему было просто узнать о рекомендациях?

Answer 1

[Антон Спирин]

Суть:

const recommendation = recommendations.find(({ movieId }) => movieId === movie.id);

Поиск можно выполнять в селекторе, в колбеке movies.map, при необходимости меморизировать и тд.

Comments

[lexstile]

То есть, если проверять в колбеке movies.map - это нормально?
Просто думал, обычно заранее данные подготавливают

[Антон Спирин]

lexstile, тут все зависит от сложности вашего приложения, потенциального количества перерисовок списка при использовании и количества рекомендаций.
Если перерисовок минимум, а рекомендаций с десяток, то ничего страшного в вычислениях при рендере списка нет.