如何在React App中重新排序/排序Firebase数据？

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，但是在我看来，您可以创建一个redux动作来设置redux存储中的排序方向。像这样：

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)

请让我知道它是否有效...