Сортировка массива избыточного хранилища с помощью действия sortBy redux не отправляет новые реквизиты компоненту

Question

В настоящее время я пытаюсь создать функцию sortby, которая должна сортировать массив с местами в хранилище избыточностей на основе алфавитного порядка.Демонстрацию в режиме реального времени можно найти здесь: http://tabbs -web-app.herokuapp.com / Discover / home

Вставить корзины

• Home.jsx
• VenueList.jsx
• VenueListFilter.jsx
• VenueListItem

• Выбор места проведения / функция фильтра

• Фильтры Действие Генератор (избыточный)

• Filters Reducer (redux)

Описание

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

Следующий компонент извлекает массив объектов из API и сохраняет их в хранилище избыточных данных.Этот компонент связан с хранилищем резервов и имеет следующие функции резервирования для фильтрации массива:

const mapStateToProps = (state) => {
  return {
    venues: getFilteredVenues(state.venues, state.filters)
  };
};

const mapDispatchToProps = (dispatch) => ({
  startSetVenues: () => dispatch(startSetVenues())
});

Home.jsx

render() {
    return (
      <div>
        <SectionTitle
          title="Discover Nightlife with Tabbs."
          subTitle="Instant jaccess to your favorite nightclubs, lounge, bars and parties
        nationwide."
        />

        <VenueListFilter data={filterOptions} />
        <VenueList data={this.props.venues} />
      </div>
    );
  }

Следующий компонент является дочерним компонентом, которому требуются данные от подключенного компонента:

VenueList.jsx

render({ data } = this.props) {
    return (
      <div>
        <Grid container spacing={8}>
          {data.map((venue, key) => {
            return <VenueListItem key={key} venue={venue} />;
          })}
        </Grid>
      </div>
    );
  }

Последний компонент - этострока / объект / компонент отдельного объекта:

VenueListItem.jsx

<Grid item {...rest} className={classes.grid}>
    <ImageCard
      image="https://static.bab.la/pic/living/UK/going-out-dancing.jpg"
      cardTitle={venue.venue_name}
      cardSubtitle={venue.venue_description}
      content="test, abc, def"
    />
  </Grid>

В чем заключается проблема, с которой я сейчас сталкиваюсь?

Резервный магазин правильно упорядочен по алфавитному порядку.Функция mapStateToProps вызывается в Home.jsx с правильным упорядоченным массивом.Но ... функция рендеринга компонентов больше не вызывается, поэтому VenueList не получает новые реквизиты / обновленные значения.

Дополнительная информация

Функция сортировки / выбора:

const getFilteredVenues = (venues, { sortBy }) => {
  return venues.sort((a, b) => {
    if (sortBy === "alfabetical") {
      return a.venue_name.toLowerCase() > b.venue_name.toLowerCase();
    } else {
      return 0;
    }
  });
};

• Версия Redux: ^ 3.7.2
• Версия React: 16.2.0

Answer 1

sort выполняет модификацию массива на месте.Просто сделайте копию.

const getFilteredVenues = (venues, { sortBy }) => {
  return venues.slice(0).sort((a, b) => {
    if (sortBy === "alfabetical") {
      return a.venue_name.toLowerCase() > b.venue_name.toLowerCase();
    } else {
      return 0;
    }
  });
};