当 redux saga 中的 redux 状态通过 react navigation v5 发生变化时，如何进行导航？

Question

在 Redux-saga 中更改状态时如何导航屏幕？？

我的问题是我不知道如何使用 react navigation v5

从 reducer 或 saga 文件导航屏幕

这是我的代码：

sagaFile.js

// sagaFile.js

function* postingMobileData(data) {
    try {
        const responseData = yield call(postMobile, data);
        yield put({type: SAVE_MOBILE_RESPONSE, responseData});        
        
    } catch (e) {

    }
}


export function* post_mobile() {
    yield takeLatest(POST_MOBILE_DATA, postingMobileData);
}

reducer.js

// reducer.js

export default function (state = initialState, action) {
    switch (action.type) {
        case SAVE_MOBILE_RESPONSE:
            return {
                ...state,
                mobileRes : action.responseData
            }

        default:
            return {
                ...state
            }
    }
}

navigationStack.js

//navigationStack.js

import React from "react";
import Login from "../container/LoginContainer";
import Registration from "../container/RegistrationContainer";
import OtpVerification from "../container/otpVerificationContainer";

import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";

const Stack = createStackNavigator();

Navigator = () => {

    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerShown: false
                }}>
                <Stack.Screen name="Login" component={Login} />
                <Stack.Screen name="Registration" component={Registration} />
                <Stack.Screen name="OtpVerification" component={OtpVerification} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default Navigator;

react-native version : 0.63.1
redux-saga version : 1.1.3
react-navigation version : 5.7

我想在 sagaFile.js

中调用 postingMobileData(data) 时更改屏幕

如果有什么办法可以告诉我一个吗？

Answer 1

我在我的应用程序中通过在矩形导航上关注 this guide，Navigating without the navigation prop。

我就是这样做的：

// App.js

import { navigationRef } from './NavigationService';
import { NavigationContainer } from '@react-navigation/native';

const Stack = createStackNavigator();

const App = () => (
    <NavigationContainer ref={navigationRef}>
       <Stack.Navigator
                screenOptions={{
                    headerShown: false
                }}>
                <Stack.Screen name="Login" component={Login} />
                <Stack.Screen name="Registration" component={Registration} />
                <Stack.Screen name="OtpVerification" component={OtpVerification} />
            </Stack.Navigator>
    </NavigationContainer>
)

export default App

// 导航服务

import { createRef } from 'react';

export const navigationRef = createRef();
export const isMountedRef = createRef();
export const routeNameRef = createRef();

const navigate = (name, params) => {
  if (isMountedRef.current && navigationRef.current) {
    return navigationRef.current.navigate(name, params);
  } else {
    console.error('!!!!not mounted yet!!!!!!!');
  }
};

const reset = (name, params) => {
  if (isMountedRef.current && navigationRef.current) {
    return navigationRef.current.reset({
      index: 0,
      routes: [
        {
          name,
          params,
        },
      ],
    });
  } else {
    console.error('!!!!not mounted yet!!!!!!!');
  }
};

export default {
  navigate,
  reset,
  routeNameRef,
};

// 传奇

import NavigationService from '../NavigationService';

function* postingMobileData(data) {
    try {
        const responseData = yield call(postMobile, data);
        yield put({type: SAVE_MOBILE_RESPONSE, responseData}); 
        yield NavigationService.navigate('OtpVerification');       
        
    } catch (e) {

    }
}

当 redux saga 中的 redux 状态通过 react navigation v5 发生变化时，如何进行导航？

How to make navigation, when a redux state changes in redux saga with react navigation v5?

react-native

redux

redux-saga

react-hooks

react-navigation-v5