How to navigate when redux state changes?

Question

How can I redirect to an different screen when my async redux action is complete and the state has changed?

I currently have redux and react navigation working in my app and I have the following code that dispatches an action, fetches my tokens and stores them to the redux state. When the actions succeeds (I.e. the state of this.props.isReady changes to true) I'd like to navigate to a new screen in my StackNavigator. But how can I do that?

import * as React from "react";
import { connect } from "react-redux";
import { fetchToken } from "./actions";
import { ActivityIndicator, View, Text } from "react-native";
import { Token } from "../../utils/interfaces";
import Styles from "../../theme/Styles";

export interface Props {
    navigation: any;
    token: Token;
    isReady: boolean;
    fetchToken(grantType: string, id: number, secret: string): object;
}

function bindAction(dispatch) {
    return {
        fetchToken: (grantType: string, id: number, secret: string) => dispatch(fetchToken(grantType, id, secret)),
    };
}

const mapStateToProps = (state: any) => ({
    token: state.setupReducer.token,
    isReady: state.setupReducer.isReady,
    error: state.setupReducer.error,
});

class SetupContainer extends React.Component<Props> {

    state = {
        message: "Etablerarar uppkoppling",
    };

    componentDidMount() {
        this.props.fetchToken("client_credentials", XXXXXXXXX, "YYYYYYYYYYYYYYY");
    }
    render() {
        if (this.props.isReady) {
            return (
                <View>
                    <ActivityIndicator size="large" color="#FF6600" />
                    <Text style={Styles.p}>{this.state.message}</Text>
                </View>
            );
        }

        return (
            <View style={[Styles.marginY, Styles.p]}>
                <Text style={Styles.p}>All done!</Text>
            </View>
        );
    }
}

export default connect(mapStateToProps, bindAction)(SetupContainer);

cuongtd cuongtd · Accepted Answer · 2019-08-02T08:42:19

you can watch props change in componentDidUpdate

 componentDidUpdate(prevProps) {
     if (!prevProps.isReady && this.props.isReady) {
       // navigate
     }
 }

How to navigate when redux state changes?

2 Answers