Перенаправление на экран после асинхронного действия в приложении React-Native Redux с использованием redux-thunk

Question

Я интегрирую redux (версия redux - 4.0.x, response-redux версию - 7.1.x) в существующее реактивное приложение (версия - 0.60.5) с реакцией навигации (версия 4.0.x). и обновление существующих внутренних запросов Http от Axios для извлечения API в создателях с избыточным действием с использованием промежуточного программного обеспечения redux-thunk (версия - 2.3.x).

Мне не удалось выяснить, как настроить реагирующую навигацию для перенаправления на другой экран при использовании функции успеха вызова извлечения.

Здесь я не собирается передавать навигацию в режим редукции с помощью реагировать-навигацию / помощники-редукторы , но необходимо сохранять реакцию-навигацию для управления навигацией приложения

Пример выборкиПозвоните в 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
    };
}

Пример Reducer (Login 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
    }
}

, затем подключил редуктор с корневым редуктором в конфигурации хранилища и подключился к экрану(Экран входа в систему), как показано ниже

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

Answer 1

Я создал библиотеку для решения таких проблем навигации, как эта.

React Navigation Helpers

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

import NavigationService from "react-navigation-helpers";


<MainNavigator
  ref={navigatorRef =>
    NavigationService.setGlobalLevelNavigator(navigatorRef)
  }
/>

После того, как вы закончите настройку. С помощью этой библиотеки вы можете перемещаться куда угодно и куда угодно.

ИСПОЛЬЗОВАНИЕ

// Goes to spesific screen from prop
NavigationService.navigate("home")

// Goes to preview screen
NavigationService.back()

Я считаю, что это решение решит вашу путаницу и решит вашу проблему для всего проекта.

Просто вам нужно поместить эту строку кода вваш успешный результат извлечения:

NavigationService.navigate("home")

Если у вас возникли проблемы с использованием ответных навигационных помощников, спросите меня что-нибудь ?