Как переупорядочить / отсортировать данные Firebase в приложении React?

Question

Итак, я летаю здесь, рядом с штанами, и мне нужна помощь в переупорядочении набора данных. Вот база моего реагирующего компонента. Это личный проект, который я делаю, чтобы потом снова использовать на работе для реального проекта. Основой для этого послужила серия YouTube о React + Firebase: https://www.youtube.com/playlist?list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3

В идеале, я бы хотел набор кнопок, которые будут сортировать данные из asc или desc. И, возможно, зависит от некоторых других вещей.

import React, { Component } from 'react';
import ShopList from '../shops/ShopList.js';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
import { firestoreConnect } from 'react-redux-firebase';
import { compose } from 'redux';


class Dashboard extends Component {
  reOrder = (e) => {
    e.preventDefault();
    console.log("button works!");
  }

  render() {
    const { shops } = this.props;

    return(

      <div className="dashboard container">
      <Helmet>
          <title>Dashboard | Indianapolis Coffee Guide</title>
      </Helmet>
        <div className="row">
            <div className="col-sm-6">
              <button className="btn btn-primary" onClick={this.reOrder}>Reorder</button>
            </div>
        </div>
        <div className="row">
            <ShopList shops={shops} />
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    shops: state.firestore.ordered.coffeeShops,
    auth: state.firebase.auth
  }
}

export default compose(
  connect(mapStateToProps),
  firestoreConnect([
    { collection: 'coffeeShops', orderBy: ['shopName', 'asc']}
  ])
)(Dashboard)

Данные упорядочиваются прямо сейчас в конце с помощью orderBy, но мне нужно иметь возможность обновить это ...

Спасибоза вашу помощь!

Answer 1

Я не уверен, что это сработает, потому что я никогда не использовал react-redux-firebase, но мне кажется, что вы могли бы создать действие приставки, которое устанавливает направление упорядочения в хранилище приращений. Вот так:

import React, { Component } from 'react';
import ShopList from '../shops/ShopList.js';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
import { firestoreConnect } from 'react-redux-firebase';
import { compose } from 'redux';


class Dashboard extends Component {
  reOrder = (e) => {
    e.preventDefault();
    console.log("button works!");
    const orderDirection = this.props.orderDirection === 'asc' ? 'desc' : 'asc';
    this.props.dispatch(ReOderAction(orderDirection));
  }

  render() {
    const { shops } = this.props;

    return(

      <div className="dashboard container">
      <Helmet>
          <title>Dashboard | Indianapolis Coffee Guide</title>
      </Helmet>
        <div className="row">
            <div className="col-sm-6">
              <button className="btn btn-primary" onClick={this.reOrder}>Reorder</button>
            </div>
        </div>
        <div className="row">
            <ShopList shops={shops} />
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    shops: state.firestore.ordered.coffeeShops,
    auth: state.firebase.auth,
    orderDirection: state.anything.orderDirection,
  }
}

export default compose(
  connect(mapStateToProps),
  firestoreConnect([
    { collection: 'coffeeShops', orderBy: ['shopName', orderDirection]}
  ])
)(Dashboard)

Пожалуйста, дайте мне знать, если это сработало ...