How to wrap reduxifyNavigator into a component about redux-helpers HOT 5 CLOSED

// Setup navigator
const MainStack = createStackNavigator(routesConfig);
const Drawer = createDrawerNavigator(
  {
    Main: { screen: MainStack }
  },
  {
    contentComponent: NavigationDrawer
  }
);

export const AppNavigator = createStackNavigator(
  {
    Splash: {
      screen: SplashScreen,
      description: "Loading screen"
    },
    Drawer: {
      screen: Drawer,
      description: "main drawer"
    }
  },
  {
    initialRouteName: "Splash",
    headerMode: "none"
  }
);

// Create middleware and connect
export const appNavigatorMiddleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.nav
);

const ReduxAppNavigator = reduxifyNavigator(AppNavigator, "root");

// create nav component
class ReduxNavigation extends PureComponent {
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }

  onBackPress = () => {
    const { dispatch, nav } = this.props;
    if (nav.index === 0) {
      return false;
    }

    dispatch(NavigationActions.back());
    return true;
  };

  render() {
    const { dispatch, nav } = this.props;
    return <ReduxAppNavigator dispatch={dispatch} state={nav} />;
  }
}

const mapNavStateProps = state => ({
  state: state.nav
});

export default connect(mapNavStateProps)(ReduxNavigation);