使用预先存在的redux存储实现固定数据表-2排序？

Question

预先感谢您为我提供的任何信息或建议。

我还没反应过来呢。我继承了一个已经存在的项目，我已经为一个客户做了几个星期的工作，直到现在，一切都进行得很顺利。我遇到了一堵墙，我需要在这个项目中添加一个特性。

因此，该项目使用固定数据表2库，并显示一个非常简单的表，其中包含两个列，一个是复选框，另一个是文件名。

基本上，客户端要求我允许他们按字母顺序对文件的名称进行排序，在两个方向上单击一个标头( ASC/DESC )。

我可以使用一个不同的库--我会这样做--自动包含这个排序，但是客户机限制我使用这个库，因为它在所有现有工具中都使用，等等……

我一直在使用示例库来尝试并实现它，但我对它们在示例中使用的数据感到非常困惑。因为我使用的是redux商店：https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/SortExample.js

任何有着Redux经验的善良的人会给我一个指针或者一个这样做的例子。

我的项目是使用容器(逻辑)，(组件UI)。使用还原器改变状态，这是用动作调用的。

我不喜欢分享这个项目的代码，因为我自己并不拥有这个代码。

我理解移动的部分，但是文档中给出的示例是令人困惑的。再次感谢您提前提出任何建议。

编辑--我对这篇文章有一点兴趣。再次，我是新的反应，并希望得到一些帮助，使这一任务越界。

抓取术语是客户端使用的，它只是一个zip文件。

这是我的标头单元格组件，用于显示数据id排序的箭头的方向：

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import {Cell} from 'fixed-data-table-2';

var SortTypes = {
  ASC: 'ASC',
  DESC: 'DESC'
};

function reverseSortDirection(sortDir) {
  return sortDir === SortTypes.DESC ? SortTypes.ASC : SortTypes.DESC;
}

class HeaderCellSelected extends Component {

  constructor(props, context) {
    super(props, context);

    this._onSortChange = this._onSortChange.bind(this);
  }

  render() {
    const {onSortChange, sortDir, children, ...props} = this.props;
    return (
      <Cell {...props}
            sortDir={this.props.sortDir}
            headerCell={this.props.headerCell}
      >
      <a onClick={this._onSortChange}>
          {children} {sortDir ? (sortDir === SortTypes.DESC ? '↑' : '↓') : ''}
      </a>
  </Cell>
    );
  }

  _onSortChange(e) {
    e.preventDefault();

    if (this.props.sortGrabs) {
      this.props.sortGrabs(
        this.props.columnKey,
        this.props.sortDir ?
          reverseSortDirection(this.props.sortDir) :
          SortTypes.DESC
      );
    }
  }
}

HeaderCellSelected.propTypes = {
  headerCell: PropTypes.string.isRequired,
  sortDir: PropTypes.string.isRequired,
  sortGrabs: PropTypes.func.isRequired,
  columnKey: PropTypes.string.isRequired
};

export default HeaderCellSelected;

这是我的经纪人：

import PropTypes from 'prop-types';
import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../grabsTableActions';
import HeaderCellSelected from './SortHeaderCellComponent';

export const HeaderCellContainer = (props) => {

  return (
    <HeaderCellSelected
      headerCell={props.headerCell}
      sortDir={props.sortDir}
      sortGrabs={props.actions.sortGrabs}
      columnKey={"fileName"}
    />
  );
};

function mapStateToProps(state) {
  return {
    headerCell: state.grabsTable.sortCol,
    sortDir: state.grabsTable.sortDir
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Object.assign({}, actions), dispatch)
  };
}

HeaderCellContainer.propTypes = {
  actions: PropTypes.object.isRequired,
  headerCell: PropTypes.string.isRequired,
  sortDir: PropTypes.string.isRequired
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(HeaderCellContainer);

我还在还原器中添加了toe操作:现在，我只想让它朝着一个方向排序，稍后我将把它放在反向功能中：

case SORT_GRABS: {
      let grabs = state.grabs.map(grab => grab);
      grabs = grabs.sort(function(a, b){
        var valueA=a[action.columnKey].toLowerCase(), valueB=b[action.columnKey].toLowerCase();
        if (valueA < valueB){
          return -1;
        }
        if (valueA > valueB){
          return 1;
        }
        return 0;
      });
      return {...state, grabs};
    }
    default:
      return state;

我将我的头单元格组件包括在表组件中，如上面所提到的。

我希望对以下错误有所帮助：

React不识别DOM元素上的headerCell支柱。如果您有意地希望它作为自定义属性出现在DOM中，则将其拼写为小写headercell。如果意外地从父组件传递它，请从DOM元素中删除它。

我总共有三个错误，所有与道具不被认可有关。

请耐心等待我，因为我只是在工作几个星期，所以如果我不正确地使用状态和道具，并且我知道我没有正确地遵循propTypes的范围，那么请道歉。

现在，最后一点是，当我单击列标题时，我调用的是SORT_GRABS操作，它调用我的还原器，但是什么也没有发生。谢谢你提前提供帮助。

Answer 1

您正在链接的示例似乎非常直接。他们创建了一个名为SortHeaderCell的组件，您可以为您的列定义该组件，并将其作为支柱传递给Column组件。SortHeaderCell需要一个必须实现的onSortChange支柱函数。您在redux存储中存储的数据可以通过名为Column的道具传递到cell组件。在这里，您传递已经排序的数据列表。

        <Column
          columnKey="id"
          header={
            <SortHeaderCell
              onSortChange={this._onSortChange}
              sortDir={colSortDirs.id}>
              id
            </SortHeaderCell>
          }
          cell={<TextCell data={sortedDataList} />}
          width={100}
        />

所以你要做的是：

1. 你说已经有一张桌子了！放轻松点！看看什么是通过细胞支柱传下来的。这是来自redux商店的数据数组！
2. 按照github示例编写一个onSortChange函数，该示例调用一个redux操作来更新数据(将排序列表设置为redux状态)
3. 创建一个可以单击的SortHeaderCell组件，并调用您的onSortChange函数来更改redux状态。