Keeping sort and width state in redux with ag-grid for react

01_GridPanel.js

import React from 'react'
import { connect } from 'react-redux'
import { AgGridReact } from 'ag-grid-react'

import { setGridState } from '../../data/actions/grid'

class GridPanel extends React.Component {
  persistColState() {
    const opt = this.gridOptions;
    const gridState = {
      colState: opt.columnApi.getColumnState(),
      sortModel: opt.api.getSortModel()
    }
    //Call to redux action to 
    this.props.setGridState(this.props.gridName, gridState);
  }

  render() {
    return (
      <div className="ag-fresh" style={style}>
        <AgGridReact
          enableColResize={true}
          enableSorting={true}
          onColumnResized={this.persistColState.bind(this)}
          onSortChanged={this.persistColState.bind(this)}
          onGridReady={(options) => {
            this.gridOptions = options;
          }}
          {...props}
        />
      </div>
    )
  }

}

GridPanel.propTypes = {
  gridName: React.PropTypes.string.isRequired
}

export default connect((store, ownProps) => {
  const columnDefs = ownProps.columnDefs;
  const gridState = store.grid[ownProps.gridName];

  if (gridState) {
    let sorts = {}
    gridState.sortModel.forEach((sort) => {
      const sortCol = sort.colId;
      const sortDir = sort.sort;
      sorts[sortCol] = sortDir
    })
    let widths = {}
    gridState.colState.forEach((col) => {
      widths[col.colId] = col.width
    })
    columnDefs.forEach((col) => {
      col.sort = sorts[col.field]
      col.width = widths[col.field]
    })
  }

  return {
    columnDefs: columnDefs
  }
}, {
  setGridState: setGridState
})(GridPanel);

02_GridInstance.js

//rowData comes from redux store in the component which is using the GridPanel
//colDefs are defined with the default state your columns would have
//The GridPanel class above will use the last state to update the column model

<GridPanel
  gridName={"visitGrid"}
  rowData={props.data}
  columnDefs={colDefs}
  buttons={buttons}
/>

03_gridAction.js

export function setGridState(gridName, gridState) {
  return {
    type: "UPDATE_COL_DEF",
    payload: {
      gridName,
      gridState
    }
  }
}

04_gridReducer.js

let firstState = {}
if (localStorage) {
  try {
    firstState = JSON.parse(localStorage.gridState) || {};
  } catch(e) {}
}

export default function grids(state=firstState, action) {
  let payload = action.payload;
  switch(action.type) {
    case "UPDATE_COL_DEF": {
      let grid = payload.gridName
      let gridState = payload.gridState
      let nextState = {...state}
      nextState[grid] = gridState
      if (localStorage) {
        localStorage.setItem('gridState', JSON.stringify(nextState))
      }
      return nextState
    }
    default:
      return state;
  }
}