使用sortBy redux操作排序redux存储阵列不会向组件发送新道具

我目前正在尝试构建一个sortby函数,该函数需要根据alfabetical顺序对redux商店中的场地进行排序。现场演示可在以下位置找到: http://tabbs-web-app.herokuapp.com/discover/home

粘贴箱

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

• Venue Selector / filter function

• Filters Action Generactor (redux)

• Filters Reducer (redux)

描述

不幸的是,我无法将该项目上传到codesandbox,因为它超过了sandbox的120个模块限制。。。

下面的组件正在从API检索场馆阵列,并将其保存到redux商店。此组件与redux存储连接,并具有以下redux功能来过滤阵列:

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

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

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

以下组件是一个子组件,需要连接组件的数据:

维努列斯特。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>

我现在遇到的问题是什么?

redux商店是根据Alfabetial订单正确订购的。正在Home中调用mapStateToProps函数。jsx具有正确的有序数组。但是不会再次调用components render函数,因此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