React Grid Redux Integration redux state not getting updated when grid is changed

Question

I'm trying to implement a React Grid based on this example using Redux to manage the state of the store with modifications to the original example code based on a Redux application structure. But when I make a change, say for example "sort" the table, it does not get updated in the store and hence the the grid doesn't sort.

This is the grid component.

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

This is the actions file.

import { PHASES_GRID_STATE_CHANGE_ACTION } from './types';

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

And the reducer.

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

I also have a codesandbox here with the Redux DevTools extension enabled where you can see the sorting doesn't work.

What am I missing here? Any help will be much appreciated!

score 0 · Answer 1 · answered Jan 14 '18 at 15:42

And just as I typed this all out I figured out the stupid mistake that I had made. Instead of passing the updated sorting state, I kept passing the initial state.

So the function should be

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

Incase anyone else runs into something silly like this!

React Grid Redux Integration redux state not getting updated when grid is changed

1 Answers1