React Redux如何使用redux状态进行条件渲染

Question

i have some problem i can't understand how figure out with it

I'm using react-bootstrap tabs i have 3 tab in my tab panel and in each tab i have an api request for getting data. Each tab data i'm getting via redux actions so i have 3 redux actions.

on each component in componentDidMount i'm dispatching my actions which getting my data via api

everything work well.

but i wan't to prevent clicking to my tabs while one tab data request continue. When request is finished then users can click another tab and on another tab it will be same scenario.

i have a parent component where my tabs navigation:

<Tabs
            id="controlled-tab-example"
            activeKey={this.state.key}
            onSelect={key => this.setState({ key })} 
          >
            <Tab eventKey="a" mountOnEnter={true} disabled={this.props.datatableA.isLoaded}  title="Data Table A">
              <DataTableA />
            </Tab>
            <Tab eventKey="b" mountOnEnter={true} disabled={this.props.datatableB.isLoaded} title="Data Table B">
              <DataTableB />
            </Tab>
            <Tab eventKey="c" mountOnEnter={true} disabled={this.props.datatableC.isLoaded}  title="Data Table C">
              <DataTableC />
            </Tab>
          </Tabs>

here is with disabled attribute i'm making disable clicking conditionally my button if data isLoaded

let initialState = [{
    isLoaded: false
}]

export default (state = initialState, action) => {
    switch (action.type) {
        case FETCH_DATA_START:
            return {...state, isLoaded: true}
        case FETCH_DATA_SUCCESS:
            return {...state, items: action.payload, isLoaded: false}
        case FETCH_DATA_FAILED: 
            return {...state}
        default:
            return state
    }
}

so here in my reducer if data fetch start my isLoaded state is true so button is disable when success isLoaded is false so button is clickable.

but here problem is component getting the state from store once so when state updated on my store, i can't catch it and because of them my conditionally rendering not working.

how to do that?

Answer 1

Inside render deconstruct props which you are getting from mapStateToProps

Const {dataTableA, dataTableB, dataTableC} = this.props;

Then in every tab disabled condition should have all three datatable's loaded conditions, so that if any of the api calls are dispatched and not returned. No tab should be enabled

// this will be changed 
this.props.dataTableA.isLoaded
//to
dataTableA.isLoaded || dataTableB.isLoaded || dataTableC.isLoaded

P. S also check your changed states by adding console in render.