blueprintjs Tabelle mit Redux

Question

Ich habe Probleme mit einer Blueprintjs Tabelle mit Redux. Hier versuche ich, die Zeilenauswahl durch Redux zu erhalten. Ich bin ziemlich neu, um zu reagieren/redux, also vermisse ich vielleicht etwas?

Ich habe versucht, die gleiche Komponente ohne redux (d. H. Die Auswahl ändert den Zustand der Komponente) und es funktioniert gut, aber ich würde es vorziehen, Redux zu verwenden.

ist hier ein minimales Beispiel (jsx) mit 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')) 

Wenn ich auf einen Zeilenkopf klicken, TableTestRedux.render() aufgerufen wird und dies bewirkt, dass alle Tabellenzellen leer sein. Das Protokoll zeigt:

Warnung: NaN ist ein ungültiger Wert für die height CSS-Stil-Eigenschaft. Überprüfen Sie die Rendermethode RegionLayer.

Answer 1

Das Problem war auf meiner Seite in overrideEntryReducer, ich löschte die Eigenschaft edgeOverrides des Staates. Hier ist die Lösung:

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