Сортировка данных в React Redux - PullRequest
Новая
       45

Сортировка данных в React Redux

1 голос
/ 04 марта 2020

Я пытаюсь создать кнопку сортировки, и хотя мои данные (меню) сортируются по алфавиту после того, как я добавил меню сортировки в регистр меню и функцию сортировки для mapStateToProps в моем главном контейнере, мой вопрос заключается в том, что будет самым простым способ реализовать эту кнопку, которая при нажатии будет сортировать данные? Нужно ли создавать новый компонент для этой кнопки или я могу что-то сделать в своем контейнере?

Контейнер: 

class DataContainer extends Component {

displayCards = () => {
  switch(this.props.path) {
      case "menus":
          return (this.props.sort_menus.map(card => (
              <NavLink style={{ color: "black" }} to={`/menus/${card.id}`} key={card.id}><MenuCard view={this.props.displayObject} info={card} /></NavLink>
          )));

      default:
          return (<div>Empty</div>)
   }
};

render() {
    return (
       <CardColumns>
          {this.displayCards()}
       </CardColumns>
      )
   }
}

const mapStateToProps = state => {
    return {
        sort_menus: state.menus.cards.sort(function(menu1, menu2) {
          if (menu1.name < menu2.name) {
            return -1;
          }
          if (menu1.name > menu2.name) {
            return 1;
          }
        })
    }
};

1 Ответ

1 голос
/ 04 марта 2020

Лучше иметь запомненный селектор, который будет сортировать элементы. проверить документы в редуксе https://redux.js.org/recipes/computing-derived-data/

...