Redirect to a Screen after async action on React-Native Redux Application using redux-thunk

Question

I'm integrating redux(redux version - 4.0.x, react-redux version - 7.1.x) to an existing react-native(version - 0.60.5) application with react-navigation(version - 4.0.x) and revamping the existing backend Http requests from Axios to fetch API in redux action creators using redux-thunk middleware(version - 2.3.x).

I was unable to figure out how to setup react-navigation to redirect to another screen when in the success function of the fetch call.

Here I'm not going to handover the navigation to redux using react-navigation/redux-helpers but need to keep the react-navigation to manage the navigation of the application

Example Fetch Call in Redux Action Creator(Login):

 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(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
    }
}

then connected the reducer with a root reducer in redux store configuration and connected to a screen(Login Screen) as below

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

FreakyCoder FreakyCoder · Accepted Answer · 2019-11-08T11:33:00

I have created a library for handling navigation problems like this one.

React Navigation Helpers

Its setup and usage are very basic. You simply need to set your navigation reference into the top global level (which the library handles it itself). You simply put this code segment into your navigation logic and set global level navigator with your main navigator.

import NavigationService from "react-navigation-helpers";


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

After you're done with the setup. You can navigate to anywhere to anywhere with this library.

USAGE

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

// Goes to preview screen
NavigationService.back()

I believe that this solution will solve your confusion and fix your problem for the whole project.

Simply you need to put this line of code into your successful fetch result:

NavigationService.navigate("home")

If you have trouble using react-navigation-helpers, ask me anything 😇

Redirect to a Screen after async action on React-Native Redux Application using redux-thunk

1 Answers

React Navigation Helpers

USAGE