javascript - 使用 sortBy redux 操作对 redux 存储数组进行排序不会向组件发送新的 props

Question

我目前正在尝试构建一个 sortby 函数，该函数需要根据字母顺序对 redux 存储中的 field 数组进行排序。可以在这里找到现场演示: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，因为它超出了沙箱的120个模块限制...

以下组件从 API 检索 field 数组并将其保存到 redux 存储中。该组件与 redux 存储连接，并具有以下 redux 函数来过滤数组:

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

The following component is a child component which needs the data from the connected component:

VenueList.jsx

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

The last component is the individual venue row / object / component:

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>

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

The redux store is correctly being ordered based on alfabetical order. The mapStateToProps function is being called in the Home.jsx with the correct ordered array. But.. the components render function is not being called again, so the VenueList does not receive the new props / updated values.

其他信息

排序/选择器功能:

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