Possible Unhandled Promise Rejection (id: 0): Error: Actions must be plain objects. Use custom middleware for async actions

Question

Redux state managemnet and the fetching of the data from api using redux-thunk are all working as expected. When I navigate to other screens from the actions when data fetch is success, navigation is done with following warning:

Possible Unhandled Promise Rejection (id: 0):
     │ Error: Actions must be plain objects. Use custom middleware for async actions.

I didn't get any solution that help me.

Method for fetching the data:

export function insertFirebaseToken() {
    return function action(dispatch) {

      const request = axios({
        method: 'POST',
        url: 'https://beta......',
        headers: (
        {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ....',
        }),
        data: JSON.stringify(
        {
          firebase_token: '....',
        })
      });

      return request.then(
        response => {
          if(response.data.success){
            dispatch(saveLoginDataSuccessFailureError());
            dispatch(NavigationService.navigate('MyCompanies'));
          }
          else{
            if (Platform.OS === 'android') {
              ToastAndroid.showWithGravityAndOffset( 'Error: '+response.data.message, ToastAndroid.LONG, ToastAndroid.BOTTOM, 0, 50);
            }
            else{
              alert('Error in inserting firebase Token.');
            }
            dispatch(saveLoginDataSuccessFailureError());
          }
        },
        error =>  {
          dispatch(saveLoginDataSuccessFailureError());
          ToastAndroid.showWithGravityAndOffset( 'Error: '+error, ToastAndroid.LONG, ToastAndroid.BOTTOM, 0, 50);
        }
      );
    }
}

companyClickedSuccessFailureError method:

export const companyClickedSuccessFailureError = () => {
  return{
    type: COMPANY_CLICKED_SUCCESS_FAILURE_ERROR,
  };
}

activeReducers:

import {
GET_COMPANIES_SUCCESS,
COMPANY_CLICKED_REQUEST,
COMPANY_CLICKED_SUCCESS_FAILURE_ERROR,
} from '../actions/types';

const initialState ={
  loading: false,
  arrayRecentCompanies: []
};

export default (state = initialState, action) => {
  switch(action.type){
    case COMPANY_CLICKED_REQUEST:
      return {...state, loading: true};
    case COMPANY_CLICKED_SUCCESS_FAILURE_ERROR:
      return {...state, loading: false};
    case GET_COMPANIES_SUCCESS:
      return {...state, loading: false, arrayRecentCompanies: action.payload};
    default:
      return state;
  }
}

NavigationService.js :

import { NavigationActions } from 'react-navigation';

let navigator;

function setTopLevelNavigator(navigatorRef) {
navigator = navigatorRef;
}

function navigate(routeName, params) {
navigator.dispatch(
  NavigationActions.navigate({
    routeName,
    params,
  })
);
}

// add other navigation functions that you need and export them

export default {
navigate,
setTopLevelNavigator,
};

Answer 1

The result returned from the NavigationService.navigate is not a redux action (and you can only dispatch redux actions obviously). I think you can call it directly instead of wrapping at in a redux dispatch call.