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

Question

所以我在这里坐以待毙，我需要帮助重新排序数据集。这是我的反应组件的基础。这是我正在做的个人项目，然后在工作中将其重用于实际项目。其基础来自关于 React + Firebase 的 YouTube 系列：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)

请告诉我它是否有效...