Data from Redux store coming late so it doesn't fill AG grid table/ react hook-CodePudding

I try to get state from redux store and then fill the AG grid table by updateData.

Here is my component.

const DisplayRules = () => {
    const rules = useSelector(({rules}) => rules.data);
    const dispatch = useDispatch();
    const [gridApi, setGridApi] = useState(null);
    const [gridColumnApi, setGridColumnApi] = useState(null);
    const [rowData, setRowData] = useState(null);
  
    const onGridReady = (params) => {
      setGridApi(params.api);
      setGridColumnApi(params.columnApi);
  
      const updateData = (data) => {
        setRowData(data);
      };

      if (rules) {
        updateData(rules)};
    };

    function isFirstColumn(params) {
        var displayedColumns = params.columnApi.getAllDisplayedColumns();
        var thisIsFirstColumn = displayedColumns[0] === params.column;
        return thisIsFirstColumn;
      }
    return (
        <div>
            <Typography
                style={{marginBottom: '5px'}}
                component='h5'
                variant='h5'
                align='center'>
                Rule List
            </Typography>
            <div className='ag-theme-material' style={{height: '450px'}}>
                <AgGridReact
                    frameworkComponents={{
                        EditSection,
                    }}
                    defaultColDef={{
                        flex: 1,
                        minWidth: 50,
                        resizable: true,
                        headerCheckboxSelection: isFirstColumn,
                        checkboxSelection: isFirstColumn,
                    }}
                    suppressRowClickSelection={true}
                    rowSelection={'multiple'}
                    onGridReady={onGridReady}
                    rowData={rowData}                    
                    rowDragManaged={true}
                    animateRows={true}
                    overlayNoRowsTemplate='There is no rule added yet'
                    overlayLoadingTemplate='Loading..'
                >
                    <AgGridColumn headerName= "Name" field="name" rowDrag={true} />                    
                    <AgGridColumn headerName= "Type" field="type"/>
                    <AgGridColumn headerName= "Id" field="id" hide= {true} suppressToolPanel= {true}/>
                    <AgGridColumn headerName= "Edit" field="Edit" cellRenderer= 'EditSection' cellRendererParams= {{
                    "gridApi": gridApi}}/>
                </AgGridReact>
            </div>
            <Button
                variant='contained'
                color='primary'
                startIcon={<PreviewIcon />}
                onClick={() => {
                    console.log('previewRules');
                }}>
                Preview
            </Button>
        </div>
    );
};

Now I get the rules from the store however it's empty at first. Then I get it after a second however rows don't update after it. I tried to use useEffect and set the state (rerender component) every time the rules change but it didn't work. How to solve this problem?

Also, I want it to rerender the component every time Edit Section changed. I tried to setRowData pass as a parameter but it didn't work either. I appreciate any help on this one as well. Thanks

CodePudding user response：

Try with:

    React.useEffect(() => {
        setRowData(rules);
    }, [rules]);

will rerender everytime rules changes. It should work on edit component as well

CodePudding user response：

You can just do

  rowData={rules}

and ag-grid will follow the redux state. There is really no need to use local component state in-between.