redux 状态变化时如何导航？

Question

当我的异步 redux 操作完成并且状态发生变化时，如何重定向到不同的屏幕？

我目前在我的应用程序中使用 redux 和 react 导航，并且我有以下代码可以调度一个动作、获取我的令牌并将它们存储到 redux 状态。当操作成功时（即 this.props.isReady 的状态变为 true），我想导航到 StackNavigator 中的新屏幕。但是我该怎么做呢？

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

导出默认连接(mapStateToProps, bindAction)(SetupContainer);

Answer 1

你可以在 componentDidUpdate 中观察 props 的变化

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