blueprintjs Table with redux

Question

I have troubles with a blueprintjs table with redux. Here I am trying to maintain the row selection thru redux. I am fairly new to react/redux so maybe I am missing something?

I tried the same component without redux (i.e. the selection modifies the state of the component) and it works fine, but I would prefer to use redux.

Here is a minimal example (jsx) with redux:

import React from "react"
import {Cell, Column, Table, SelectionModes, Regions, RegionLayer} from "@blueprintjs/table"
import ReactDOM from 'react-dom';
import {Provider, connect} from 'react-redux'
import {applyMiddleware, createStore} from 'redux';
import createLogger from 'redux-logger';


export class TableTestRedux extends React.Component {

    constructor(props) {
        super(props)
        this.state={}
    }

    componentDidUpdate() {
        console.log("TableTestRedux:componentDidUpdate props:", this.props)
    }

    onSelection(e) {
        console.log("TableTestRedux:onSelection e:", e)
        if (e.length > 0) {
            var selectedRow = e[0].rows[0]
            this.props.onSelectedEdgeOverrideIdx(selectedRow)
        }
    }

    getSelectedRegion() {
        var region = this.props.selectedEdgeOverrideIdx != null ? [Regions.row(this.props.selectedEdgeOverrideIdx)] : []
        console.log('TableTestRedux:getSelectedRegion returns ', region);
        return region
    }

    render() {
        console.log('TableTestRedux:render props:', this.props);

        const renderCell = (rowIndex) => <Cell>{this.props.edgeOverrides[rowIndex]}</Cell>;
        return (
            <div>
                <Table ref="table" numRows={this.props.edgeOverrides.length} onSelection={(e) => this.onSelection(e)}
                       allowMultipleSelection={false}
                       selectionModes={SelectionModes.ROWS_ONLY}
                       selectedRegions={this.getSelectedRegion()}>
                    <Column name="Description" renderCell={renderCell}/>
                </Table>
            </div>
        )
    }
}

// --- redux container/smart component


const mapStateToProps = (state) => {
    console.log("TableTestRedux:mapStateToProps ", state);
    return {
        edgeOverrides: state.edgeOverrides ? state.edgeOverrides : [],
        selectedEdgeOverrideIdx: state.selectedEdgeOverrideIdx

    }
}

const mapDispatchToProps = (dispatch) => {
    console.log("TableTestRedux:mapDispatchToProps ");
    return {
        onSelectedEdgeOverrideIdx: (selectedEdgeOverrideIdx) => {
            dispatch(OverrideEntryActions.selectEdgeOverrideIdx(selectedEdgeOverrideIdx))
        }
    }
}

export const TableTestReduxCC = connect(mapStateToProps, mapDispatchToProps)(TableTestRedux)


// --- redux action and reducer

export class OverrideEntryActions {

    static selectEdgeOverrideIdx(selectedEdgeOverrideIdx) {
        return {
            type: 'SELECT_EDGE_OVERRIDE_IDX',
            selectedEdgeOverrideIdx: selectedEdgeOverrideIdx
        }
    }
}


const initialOverrideEntryState = {
    selectedEdgeOverrideIdx: null,
    edgeOverrides: ["bla", "blabla", "more blabla"]
}

export const overrideEntryReducer = (state = initialOverrideEntryState, action) => {
    console.log("overrideEntryReducer: action:", action, " state:", state)
    switch (action.type) {
        case 'SELECT_EDGE_OVERRIDE_IDX':
            return {selectedEdgeOverrideIdx: action.selectedEdgeOverrideIdx}
        default:
            return state
    }
}

// --- launch


var store = createStore(overrideEntryReducer, applyMiddleware(createLogger()))

ReactDOM.render((
    <Provider store={store}>
        <TableTestReduxCC/>
    </Provider>
), document.getElementById('app'))

When I click on a row header, TableTestRedux.render() is called and this causes all the table cells to be blank. The log shows:

Warning: NaN is an invalid value for the height css style property. Check the render method of RegionLayer.

Answer 1

The problem was on my side in overrideEntryReducer, I was erasing the edgeOverrides property of the state. Here is the fix:

  case 'SELECT_EDGE_OVERRIDE_IDX':
            return {...state,selectedEdgeOverrideIdx: action.selectedEdgeOverrideIdx}