blueprintjs reduxとのテーブル

Question

私はreduxでblueprintjsテーブルに問題があります。ここで私はreduxを通じて行の選択を維持しようとしています。私はかなり反応した/ reduxので、多分私は何かが不足している新しいですか？

私はreduxなしで同じコンポーネントを試しました（つまり、選択によってコンポーネントの状態が変更されました）。それは問題なく動作しますが、reduxを使用することをお勧めします。ここ

はReduxのと最小例（JSX）である：行ヘッダにIをクリックすると

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（）と呼ばれ、これは、すべての表のセルが空白であることを引き起こします。ログには、

警告： CSSスタイルプロパティの値が無効です。レンダリング方法がRegionLayerであることを確認してください。

Answer 1

問題は私の側のoverrideEntryReducerで、状態のedgeOverridesプロパティを消去していました。ここに修正があります：

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