Question

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

这是网格组件。

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;
  }
}

我还有一个codesandbox here，其中启用了Redux DevTools扩展，您可以看到排序不起作用。

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

Answer 1

就像我输入的一样，我想出了我犯过的愚蠢错误。我没有传递更新的排序状态，而是继续传递初始状态。

所以函数应该是

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

任何其他人都会遇到像这样愚蠢的事情！

当网格更改时，React Grid Redux Integration redux状态不会更新

1 个答案: