6

In my job we decided to use AG-Grid in react variant: https://www.ag-grid.com/best-react-data-grid/index.php

Currently, our architecture for React is Redux. From my little knowledge of AG-Grid I can say that it doesn't fit very well to this architecture. AG-Grid keeps it's overall state inside the component. It's cumbersome or even not clever to try to connect it to redux forcefully and completely.

I can live with that but at least I need to watch for the row model changes - meaning fetches of new rows, sorts, filtering (I don't need to watch for cell changes). I have 2 ideas on how to watch for this and connect it to redux.

Option 1 - Use gridOptions.onModelUpdated()

With gridOptions.onModelUpdated() I know when filtering or sort was executed but I can't get to all rows displayed (docs):

State 1: Row Data

API: There is no API to get this data. However it was provided by the application so you should already have it.

Thus I can't dispatch a redux action as I don't have any data to update it with.

Option 2 - datasource.getRows()

I could dispatch actions with new rows. However, I haven't found any onReset/onRowsDeleted/... event, thus I don't know when to clear redux's state.rows. Update I can know that previous rows were cleared if argumernt params of datasource.getRows(params) is params.startRow === 0.

Question

Maybe I find a way how to use one of the 2 options but my question is:

Are those good ideas to how connect AG-Grid to Redux?

Community
  • 1
  • 1
Amio.io
  • 17,083
  • 11
  • 66
  • 100
  • 1
    did you ever figure out your solution? I'm looking at a similar setup and I'm thinking it a bit "tricky" to implement the data-source hooks... Totally do-able, especially for 1 time requests, but not really viable for changes to table data elsewhere in the state, needing to reload/update the ag-grid – zeroasterisk Oct 13 '16 at 21:29
  • Man, I was asked to make a gist. I will have one on monday. – Amio.io Oct 14 '16 at 07:49
  • @zeroasterisk Here is the gist: https://gist.github.com/zatziky/72f0826e97a011d3f2af75df84981b61 It is from our PoC and I wouldn't ever publish such a mess... It is working though. I am only publishing it because of being asked. :) We have added some additional functionality like read-only grid and some other stuff. In our current project we have tight deadlines so there is not enough space to refactor this component. As soon as we get to refactor it I'll update the link. – Amio.io Oct 17 '16 at 20:00
  • @zatziky Thanks for sharing your code, it is very helpful. Did you got the chance to refactor your code? – Anas Apr 20 '17 at 02:29
  • @Anas Nope, it grew even, a big spaghetti bowl. ;) Actually, we did some refactoring and it helped a little. Unfortunately, I don't have the code base anymore. – Amio.io Apr 20 '17 at 07:51

1 Answers1

0

Ag-grid (v10.1.0) now supports Redux :

https://ag-grid.com/example-react-redux/?framework=all#gsc.tab=0

Anas
  • 5,267
  • 5
  • 38
  • 67