Навигация не вызывается сразу после того, как пользователь не прошел проверку подлинности

Question

Я пытаюсь выйти из системы и затем отправить его на экран SignedOut, но когда я нажимаю на Выход, он вызывает функцию unauthUser, но затем он перезапускает навигатор переключателя на приборную панель, и мне нужно перейти на экран профиля, чтобы нажмите еще раз на Выйти, чтобы выйти. Есть идеи, что я делаю не так во всем этом?

Вот моя кнопка из Profile.js

<TouchableOpacity
  onPress={() => onSignOut().then(() => {
     this.props.dispatch(unauthUser)
     navigation.navigate("SignedOut")
     }
  )}
>
    <View style={styles.signOutButton}>
        <Text style={styles.button}>SIGN OUT</Text>
    </View>
</TouchableOpacity>

onSignOut() от Auth.js

export let USER_KEY = 'myKey';

export const onSignIn = async () => { await AsyncStorage.setItem(USER_KEY, 'true') };
export const onSignOut = async () => { await AsyncStorage.removeItem(USER_KEY) };

export const isSignedIn = () => {
  return new Promise((resolve, reject) => {
    AsyncStorage.getItem(USER_KEY)
      .then(res => {
        if (res !== null) {
          // console.log('true')
          resolve(true);
        } else {
          resolve(false);
          // console.log('false')
        }
      })
      .catch(err => reject(err));
  });
};

unauthUser от authActions.js

exports.unauthUser = {
  type: 'UNAUTH_USER'
}

и из authReducer.js

case 'UNAUTH_USER':
  return {
    user_id: undefined,
    token: undefined
};

а вот мой переключатель навигатор

export const createRootNavigator = (signedIn = false) => {
return SwitchNavigator(
    {
      SignedIn: {
        screen: SignedIn
      },
      SignedOut: {
        screen: SignedOut
      }
    },
    {
      initialRouteName: signedIn ? "SignedIn" : "SignedOut"
    }
  );
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      signedIn: false,
      checkedSignIn: false
    };
  }

  async componentWillMount() {
    await isSignedIn()
        .then(res => this.setState({ signedIn: res, checkedSignIn: true}))
        .catch(err => alert("An error occurred"));
  }

  render() {
    const { checkedSignIn, signedIn } = this.state;
    // If we haven't checked AsyncStorage yet, don't render anything (better ways to do this)
    if (!checkedSignIn) {
      return null;
    }

    const Layout = createRootNavigator(signedIn);
    return (
      <SafeAreaView style={styles.safeArea}>
        <View style={{flex: 1, backgroundColor: '#ffffff'}}>
          <StatusBar barStyle="light-content"/>
          <Layout />
          <AlertContainer/>
        </View>
      </SafeAreaView>
    )
  }
};