使用“Redux-Saga”中的“React Navigation 6.0”重定向用户

Question

I am using React Navigation 6.0 and I want to push or redirect the user after a specific function was called out.

Inside my redux saga function:

    export function* Login({payload}) {
      try {
          const response = yield call(loginUser, payload);
          yield call(setToken(response.token));
          yield put(NavigationActions.navigate({routeName: 'ProfilePageScreen'}));
      } catch (error) {
       console.log(error)
    }

Notice that I've used :

yield put(NavigationActions.navigate({routeName: 'ProfilePageScreen'}));

to try to redirect the user once the token is saved using AsyncStorage .

However, this doesn't work. How do I redirect my user after the token saved inside redux saga ? Please help!

UPDATE : I tried both of the following as per React Navigation 6 .

  yield call(
    navigation.dispatch(
      CommonActions.navigate({
        name: 'ProfileScreen',
      }),
    ),
  );

and also:

  yield put(
    navigation.dispatch(
      CommonActions.navigate({
        name: 'ProfileScreen',
      }),
    ),
  );

But both have no effect.

Answer 1

Change routeName to name and try

yield put(NavigationActions.navigate({name: 'ProfilePageScreen'}));

and there is more if you are switching from React Navigation 4 to React Navigagtion 6

Now NavigationActions are deprecated and shift to another package called @react-navigation/native and from there you can call commonActions and from there you can navigate.

Docs: https://reactnavigation.org/docs/navigation-actions