0

我正在尝试基于此示例实现 React Grid，使用 Redux 来管理商店的状态，并对基于 Redux 应用程序结构的原始示例代码进行修改。但是当我进行更改时，例如“排序”表格，它不会在商店中更新，因此网格不会排序。

这是网格组件。

class Phases extends Component {

  changeSorting() {
    this.props.createGridAction('sorting', this.props.grid.sorting);
  }

  render() {
    const { phases, grid } = this.props;
    console.log(grid);
    return(
      <Paper>
        <Grid
          rows={rows}
          columns={columns}
        >
          <SortingState
            sorting={grid.sorting}
            onSortingChange={this.changeSorting.bind(this)}
          />
          <IntegratedSorting />
          <Table />
          <TableHeaderRow showSortingControls />
        </Grid>
      </Paper>
    );
  }
}

function mapStateToProps(state) {
  return {
    grid: state.phases_grid
  }
}

export default connect(mapStateToProps, actions)(Phases);

这是动作文件。

import { PHASES_GRID_STATE_CHANGE_ACTION } from './types';

export function createGridAction(partialStateName, partialStateValue) {
  return {
    type: PHASES_GRID_STATE_CHANGE_ACTION,
    partialStateName,
    partialStateValue
  };
}

还有减速机。

import { PHASES_GRID_STATE_CHANGE_ACTION } from '../actions/types';

const gridInitialState = {
  sorting: []
}

export default function(state = gridInitialState, action) {

  switch (action.type) {
    case PHASES_GRID_STATE_CHANGE_ACTION:
      console.log(action);
      const nextState = Object.assign(
        {},
        state,
        {
          [action.partialStateName]: action.partialStateValue,
        },
      );
    return nextState;
    default:
      return state;
  }
}

我这里还有一个启用了 Redux DevTools 扩展的代码框，您可以在其中看到排序不起作用。

我在这里想念什么？任何帮助都感激不尽！

4

1 回答 1

0

就在我把这一切都打出来的时候，我发现了我犯的愚蠢错误。我没有传递更新的排序状态，而是继续传递初始状态。

所以函数应该是

changeSorting(sorting) {
    this.props.createGridAction('sorting', sorting);
}

以防其他人遇到这种愚蠢的事情！

于 2018-01-14T15:42:12.510 回答