带redux的blueprintjs表

Question

我对redux的blueprintjs表有问题。在这里，我试图通过redux来维护行选择。我对react/redux还是个新手，所以也许我错过了什么？

我尝试了没有redux的相同组件(即，选择修改了组件的状态)，它工作得很好，但我更喜欢使用redux。

下面是一个使用redux的最小示例(jsx)：

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'))

当我单击行标题时，会调用TableTestRedux.render()，这会导致所有表单元格都为空。日志显示：

警告:对于height css style属性，NaN是无效值。检查RegionLayer的render方法。

Answer 1

在overrideEntryReducer中，问题出在我这一边，我是在擦除状态的edgeOverrides属性。修复方法如下：

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