React Navigation и компонент загрузки в React Native

Question

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

    import React, { PureComponent } from "react";
    import { Text, View } from "react-native";
    import { withNavigationFocus } from "react-navigation-is-focused-hoc";
    import { NavigationActions } from "react-navigation";
    import { connect } from "react-redux";
    import ClassListing from '../../components/ClassListing/ClassListing';
    import Actions from "../../state/Actions";
    import { default as stackStyles } from "./styles";
    import {
      StyleCreator
    } from "../../utils";
    let styles = StyleCreator(stackStyles.IndexStyles)();



    @withNavigationFocus
    @connect(() => mapStateToProps, () => mapDispatchToProps)
    export default class ClassList extends PureComponent {
      static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;
        return {
          header: null,
          tabBarOnPress({ jumpToIndex, scene }) {
            params.onTabFocus();
            jumpToIndex(scene.index);
          },
        };
      };

      constructor(props) {
        super(props);
        this.state = {};
        console.ignoredYellowBox = ["Warning: In next release", "FlatList"];
      }

      componentDidMount() {
        console.log("componentDidMount");
        this.props.navigation.setParams({
          onTabFocus: this.handleTabFocus
        });
      }

      componentDidUpdate() {
        console.log("I am updated");
      }

      _handleNavigationBar = () => (
        <View style={styles.headerContainer}>
          <Text style={styles.headerLeftTitle}>Klasselister</Text>
        </View>
      );

      handleTabFocus = () => {
        this.props.resetClassList();

        // setTimeout(() => {
        //   this._openChildSchoolSelector();
        // },500);
      };

      _openChildSchoolSelector = () => {
        if (
          !this.props.childrenSelection.selectedDependant ||
          !this.props.childrenSelection.selectedSchool
        ) {
          console.log("navigate to child selector");
          this.props.navigation.dispatch(
            NavigationActions.navigate({
              routeName: "ChildSchoolSelector",
            })
          );
        }
      };

      render() {
        return (
          <View>
            {this._handleNavigationBar()}
            {this.props.classList &&
            this.props.classList.classList &&
            this.props.classList.classList.length > 0 ? (
              <ClassListing list={this.props.classList.classList} />
            ) : (
               null
              // this._openChildSchoolSelector()
            )}
          </View>
        );
      }
    }

    const mapStateToProps = (state) => {
      const { classList, childrenSelection } = state.appData;

      console.log("[Classlist] mapStateToProps", classList);
      console.log("[Classlist] mapStateToProps", childrenSelection);

      return {
        classList,
        childrenSelection
      };
    };

    const mapDispatchToProps = (dispatch) => ({
      resetClassList: () => {
        dispatch(Actions.resetClassList());
      },
    });

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

1. this.props.resetClassList ();
2. this._openChildSchoolSelector ()

Проблема в том, что this. _openChildSchoolSelector () вызывается, пока this.props.resetClassList () не завершен.

this.props.resetClassList () работает следующим образом

он вызывает такое действие

static resetClassList() {
 return {
  type: ActionTypes.RESET_CLASS_LIST
};
}

, который затем очищает список классов следующим образом

case ActionTypes.RESET_CLASS_LIST:
 return createDefaultState();

в ClassListReducer. js

, а также в ChildrenSelectionRedcuer. js

  case ActionTypes.RESET_CLASS_LIST:
  return createDefaultState();

Какие-нибудь подсказки, чтобы решить эту проблему? В моем проекте используется очень старая навигация React v1

Одна вещь, которую я сделал, - это

componentWillReceiveProps(nextProps) {
console.log(this.props);
console.log(nextProps);

if (
  nextProps.isFocused &&
  nextProps.focusedRouteKey == "ClassList" &&
  (!nextProps.childrenSelection.selectedDependant ||
    !nextProps.childrenSelection.selectedSchool)
) {
  console.log("componentWillReceiveProps");
  this._openChildSchoolSelector();
}

if (
  this.props.isFocused &&
  this.props.focusedRouteKey === "ClassList" &&
  nextProps.focusedRouteKey !== "ClassList"
) {
  console.log("reset");
  this.props.resetClassList();
}
}

Но не уверен, что это элегантный способ сделать это