Использование Redux для создания защищенных маршрутов с помощью React-Navigation

Question

Как мы можем использовать redux для создания защищенных маршрутов в реагирующей навигации?

Предположим, у меня есть хранилище с избыточностью, содержащее следующее состояние

const mapStateToProps = state => {
  return {
    isAuthenticated: state.profileInfo.isAuthenticated,
    isLoaded: state.profileInfo.isLoaded,
    googleProfileLoading: state.profileInfo.googleProfileLoading
  }
};

И я использую React-навигацию для навигации по пользователю.

const loginNavigation = createStackNavigator(
  {
    login: {
      screen: Login
    },
    signup: {
      screen: Signup
    }
  },
  {
    headerMode: "none"
  }
)

const allRoutes = createSwitchNavigator(
  {
    home: {
      screen: loginNavigation
    },
    user: {
      screen: user

  },
  {
    initialRouteName: "home"
  }
);

const App = createAppContainer(allRoutes);

Теперь, если пользователь не вошел в систему, я хочу перенаправить на экран входа.

В простом реакт-редуксе это то, что я обычно делал: https://github.com/irohitb/SelfieApp/blob/master/client/src/routes.js

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

Answer 1

response-navigation имеет createSwitchNavigator точно для таких случаев, как этот Поток аутентификации .

Вы должны сгруппировать ваши защищенные маршруты в один MainStack. Используйте createStackNavigator:

const MainStack = createStackNavigator(
  {
    home: { screen: HomeScreen },
    events: { screen: EventsScreen },
    profile: { screen: ProfileScreen },
    ...
  {
    initialRouteName: "home"
  }
);

Затем настройте свой стек аутентификации, снова используя createStackNavigator:

const AuthStack = createStackNavigator({
    login: { screen: LoginScreen },
    register: { screen: RegisterScreen },
    forgot: { screen: ForgottenPasswordScreen },
    ...
});

А теперь идет createSwitchNavigator - для загрузки стека MainStack или AuthStack:

const Routes = createSwitchNavigator({
    initialLoading: InitialLoadingScreen,
    auth: AuthStack,
    all: MainStack,
}, {
    initialRouteName: 'initialLoading',
});

export default createAppContainer(Routes);

createSwitchNavigator загрузит InitialLoadingScreen, который содержит логику, если пользователь аутентифицирован или нет:

class InitialLoadingScreen extends React.Component {
    constructor(props) {
        super(props);
        this.bootstrapAsync();
    }

    bootstrapAsync = async () => {
        // Load the home screen for the logged in users 
        if (this.props.isAuthenticated) {
            return this.props.navigation.navigate('home');
        }

        // load the Auth screen if the user is NOT logged in
        this.props.navigation.navigate('login');
    }

    // Render any loading content that you like here
    render() {
        return (
            <View style={styles.container}>
                <ActivityIndicator />
            </View>
        );
    }
}

const mapStateToProps = ({ settings }) => ({
    isAuthenticated: state.profileInfo.isAuthenticated,
    isLoaded: state.profileInfo.isLoaded,
    googleProfileLoading: state.profileInfo.googleProfileLoading
});

export default connect(mapStateToProps)(InitialLoadingScreen);

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

Answer 2

Итак, у вас есть одна переменная состояния редукса isAuthenticated.

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

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

например, constructor, componentWillMount, componentDidMount и т. Д. *

для проверки избыточного состояния,

if(!this.props.isAuthenticated){
 this.props.logoutAction();
 this.props.navigation.navigate("Login");//Login or whatever your first screen is...
}

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

export const logoutAction = () => {
  return dispatch => dispatch({ type: LOGOUT_SUCCESS });
};

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

const appReducer = combineReducers({
  loginReducers: LoginReducers,
  ...
  ...
});

export default (rootReducer = (state, action) => {
  if (action.type == LOGOUT_SUCCESS) {
    state = undefined;
  }
  return appReducer(state, action);
});

это сбросит весь редуктор.

Теперь, если вы хотите сделать кнопку выхода из системы, тогда onPress кнопки просто измените isAuthenticated на false и запустите метод навигации и выход из системы, вот и все.

Answer 3

Вы можете использовать реагирующий на маршрутизатор поток для навигации

https://www.npmjs.com/package/react-native-router-flux

образец:

<Text
    style={alerts.btn}
    onPress={
        () => Actions.question(
            // send data 
            {
                'code': data_1,
            })}>
    Go to Home
</Text>