This video switches to the aggr-redux starting point.
So far, we've learned about value getters, cell renderers, and the infinite row model. What if we are keeping our data in a Redux store? Is there a way we can read and modify grid data in conjunction with Redux? Yes!
We've got a simple Redux application and need to hook the store up to ag-Grid. To do this, we first need to import a few things at the top of FileView.js:
// src/FileView.js
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { actions } from "./actions/fileActions";
We need to be able to access the store and our actions inside of App.js. We can accomplish this by defining a mapStateToProps function and a mapDispatchToProps function. These will go outside of the App component prior to the export statement:
// src/FileView.js
const mapStateToProps = state => ({ files: state.files });
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(actions, dispatch)
});
The bindActionCreators function will allow us to map our actions to functions. This will let us do things like this.props.actions.newFile().
Finally, update the export statement to wrap our component in the connect function provided by react-redux, including our mapStateToProps and mapDispatchToProps functions:
// src/FileView.js
export default connect(mapStateToProps, mapDispatchToProps)(FileView);
So far, this has all just been plain Redux, not specific to ag-Grid. We can now read data from the store, though, through props. This means we can pass our files to the grid as rowData.
One other important note here. One consequence of using Redux is that when part of the state is updated in the store, the entire state is replaced with a new version. The ag-Grid feature called Delta Row Updates is designed to work specifically with immutable stores such as Redux to ensure only the rows that have been updated will be re-rendered inside the grid.
We can enable this feature using: deltaRowDataMode={true}, along with providing a required row ID using: getRowNodeId={data => data.id}.
To add all of these props to our grid, update the AgGridReact instance to the following:
// src/FileView.js
// rest unchanged
<AgGridReact
rowData={this.props.files}
deltaRowMode={true}
getRowNodeId={data => data.id}
columnDefs={this.colDefs}
onGridReady={this.onGridReady}
defaultColDef={this.defaultColDef}
rowSelection={"multiple"}
onFirstDataRendered={params => params.api.sizeColumnsToFit()}
></AgGridReact>
If you run npm start and navigate to localhost:3000, you should see our file list in the grid. Awesome!
What if we want to modify that data with actions? Let's build some buttons in the next video that will dispatch actions and cause the grid to update in real time.