使用redux-thunk在React-Native Redux应用程序上执行异步操作后重定向到屏幕

Question

我正在将redux（redux版本-4.0.x，react-redux版本-7.1.x）集成到具有react-navigation（version-4.0.x）的现有react-native（version-0.60.5）应用程序中，修改了来自Axios的现有后端Http请求，以使用redux-thunk中间件（版本-2.3.x）在redux操作创建者中获取API。

在获取调用的成功功能中，我无法弄清楚如何设置反应导航以重定向到另一个屏幕。

这里我要不去使用react-navigation/redux-helpers将导航切换到redux，但是需要保持react-navigation以管理应用程序的导航

[在Redux Action Creator（登录）中获取调用示例：

 const fetchLogin = (username, password) => {
   const url = hostUrl + '/oauth/token'; 
   return(dispatch) => {
      dispatch(getLoginAttempt(true))
         return(fetch(url, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        },
        body:"client_secret&username="+username+"&password="+password
    }))
       .then((response) => {
            console.log("Response", response);
            if(response.status >= 200 && response.status < 300) {
                dispatch(getLoginAttempt(false))
                response.json()
                    .then((responseJson) => {
                        console.log("responseJSON", responseJson);
                        dispatch(getLoginAttemptSuccess(responseJson))
                        try{
                            setAccessToken(responseJson.access_token);
                            setAccessToken5(responseJson.access_token);
                        } catch (e) {
                            console.log("Error Saving the Access Token");
                        }

                    })
            } else {
                response.json()
                    .then((responseJson) => {
                        console.log("responseJSON", responseJson);
                        dispatch(getLoginAttempt(false))
                        dispatch(getLoginAttemptFailure(responseJson.message))
                    })
            }
        })

        .catch((error) => {
            console.log("error", error);
            dispatch(getLoginAttempt(false))
            dispatch(getLoginAttemptFailure(error))
        })

    }}


const getLoginAttempt = (isLoading) => {
    return {
        type: FETCH_LOGIN,
        isLoading: isLoading
    };
}

const getLoginAttemptSuccess = (responseJson) => {
    return {
        type: FETCH_LOGIN_SUCCESSFUL,
        responseJson: responseJson
    };
}

const getLoginAttemptFailure = (error) => {
    return {
        type: FETCH_LOGIN_FAILURE,
        error: error
    };
}

Example Reducer（登录减少器）

const initialState = {
    loginResponseData: {},
    isLoggedIn: false,
    isLoginLoading: false,
    loginError: null
}


const loginReducer = (state = initialState, action) => {
    switch (action.type) {
        case FETCH_LOGIN:
            return Object.assign({}, state,
                {
                    isLoginLoading: true,
                    isLoggedIn: false
                })
        case FETCH_LOGIN_SUCCESSFUL:
            return Object.assign({}, state,
                {
                    isLoginLoading: false,
                    isLoggedIn: true,
                    loginResponseData: action.responseJson
                })
        case FETCH_LOGIN_FAILURE:
            return Object.assign({}, state,
                {
                    isLoginLoading: false,
                    isLoggedIn: false,
                    loginError: action.error
                })
        default:
            return state
    }
}

然后在redux store配置中将reducer与根reducer连接，并如下所示连接至屏幕（登录屏幕）>

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);

我正在将redux（redux版本-4.0.x，react-redux版本-7.1.x）集成到具有react-navigation（version-4.0.x）的现有react-native（version-0.60.5）应用程序中，改造现有的...

Answer 1

我已经创建了一个库来处理类似这样的导航问题。