Реагируйте на Redux как сделать условный рендеринг с состоянием редукса

Question

У меня есть некоторая проблема, я не могу понять, как с этим разобраться

Я использую вкладки реагировать на загрузку, у меня есть 3 вкладки на панели вкладок, и в каждой вкладке у меня есть запрос API для полученияданные.Данные каждой вкладки я получаю через редукционные действия, поэтому у меня есть 3 редукционных действия.

на каждом компоненте в componentDidMount Я отправляю свои действия, которые получают мои данные через API

, все работает хорошо.

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

У меня есть родительский компонент, в котором навигация по моим вкладкам:

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

здесь с отключенным атрибутом, я отключаю условно, нажимая мою кнопку, если данные загружены

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
    }
}

так что здесь, в моем редукторе, если начало выборки данных, мое состояние isLoaded имеет значение true, поэтому кнопка отключена, когда success isLoaded имеет значение false, поэтому кнопка нажимается.

но здесь проблема в том, что компонент получает состояние из хранилища один раз, поэтому, когда состояние обновляется в моем хранилище, я не могу его перехватить, и из-за этого мой условный рендеринг не работает.

как это сделать?

Answer 1

Внутри рендеринга деконструируют реквизиты, которые вы получаете от mapStateToProps

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

Тогда в каждой вкладке в отключенном состоянии должны быть загружены все три объекта данныхусловия, так что если какие-либо из вызовов API отправляются и не возвращаются.Никакая вкладка не должна быть включена

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

P.Также проверьте ваши измененные состояния, добавив консоль в рендер.