React Grid Redux Интеграционное состояние редукса не обновляется при изменении сетки

Я пытаюсь реализовать 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;
  }
}

У меня также есть codeandbox с включенным расширением Redux DevTools, где видно, что сортировка не работает.

Что мне здесь не хватает? Любая помощь будет высоко ценится!

1 ответ

И как только я все это напечатал, я понял глупую ошибку, которую я совершил. Вместо того, чтобы передавать обновленное состояние сортировки, я продолжал передавать начальное состояние.

Так что функция должна быть

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

Если кто-то еще столкнется с чем-то глупым!

Другие вопросы по тегам