Как показать детали кликаемого файла с редуксом? - PullRequest
Новая
       4

Как показать детали кликаемого файла с редуксом?

0 голосов
/ 03 января 2019

Я создаю приложение в реакции, у которого есть график, касающийся некоторых файлов и панелей расширения (пользовательский интерфейс материала), содержащий сведения об этом файле.Я хочу использовать избыточность для переключения панели расширения на основе кликов на графике.Как мне поступить так.

У меня работает следующее. Щелчок запускает действие и отправляет реквизит в список панели расширения, в котором содержится имя файла, который нужно развернуть.Есть ли способ найти список расширений с этим именем файла и развернуть его (установите в значение true)

Graph.js 

       <BarChart
          barCategoryGap={0}
          layout="vertical"
          data={this.state.data}
          margin={{ top: 5, right: 10, left: 100, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <YAxis type="category" dataKey="name" />
          <XAxis type="number" />
          <Tooltip  />
          <Legend />
          <Bar onClick={this.props.barClicked} isAnimationActive={true} barSize={10} dataKey="High" stackId="a" fill="#8884d8" />
          <Bar onClick={this.props.barClicked} isAnimationActive={true} barSize={10} dataKey="Low" stackId="a" fill="#82ca9d" />
        </BarChart>

//Code Omitted

GraphList.propTypes = {
 barClicked:PropTypes.func,
 };

export function mapDispatchToProps(dispatch) {
 return {
   barClicked: evt => dispatch(barClicked(evt.name)),   
 };

}

редуктор.js 

    import { fromJS } from 'immutable';

    import { SHOW_CRITICAL, CRITICAL_LOADED, BAR_CLICKED } from './constants';

    // The initial state of the App
    export const initialState = fromJS({
      criticalVisibility: false,
      criticalLoading: false,
      filesClicked: ""
    });

    function homeReducer(state = initialState, action) {
      switch (action.type) {
        case SHOW_CRITICAL:
          console.log(state.get('criticalLoading'))
          return state
            .set('criticalVisibility', !state.get('criticalVisibility'))
            .set('criticalLoading', true)
        case CRITICAL_LOADED:
          return state.set('criticalLoading', false)
        case BAR_CLICKED:
          console.log(state.get('filesClicked'))
          return state
            .set('filesClicked', action.file)

        default:
          return state;
      }
    }

    export default homeReducer;

ExpansionList.js 

        render() {
        return (

          <div style={mainDiv}>
            <div style={headingDiv}>
              <Typography style={{ color: '#FFFFFF' }} align={"Left"} component={"subtitle1"}>Files</Typography>
            </div>

            {Object.entries(this.state.data).map(([file, array]) => {
              return (
                <ExpansionPanel expanded={this.expandedControl(file)}>
                  <ExpansionPanelSummary>
                    <Typography >{file}</Typography>
                  </ExpansionPanelSummary>
                  <ExpansionPanelDetails>
                    <Typography>
                      <SimpleTable data={array} />
                    </Typography>
                  </ExpansionPanelDetails>
                </ExpansionPanel>
              )
            })}
          </div>

        );
      }
    }

    const mapStateToProps = createStructuredSelector({
      filesClicked: selectFilesClicked(),
    });

    const withReducer = injectReducer({ key: 'home', reducer });
    const withSaga = injectSaga({ key: 'home', saga });

    const withConnect = connect(
      mapStateToProps,
    );

    export default compose(
      withReducer,
      withSaga,
      withConnect,
    )(ExpansionList);

ExpansionList правильно получает файл FilesClicked с именем файла, по которому только что щелкнули.Как мне расширить соответствующую карту с этим.

...