Search code examples
react-nativereduxexporedux-thunk

expo ejected - inside redux config file Maximum call stack exceeded


It is expo ejected project.

debug version working badly but not crashing, release version crashing on weak devices.(for example: iPhone 5, iPhone 6, iPhone 7 and similar devices)

Crash result return error code "Maximum call stack exceeded".(I know that means cycle loop.) for iPhone 12 or some better devices splash screen loading long time and after that loaded.

I try to debug my code for a long time along but nothing to work.

I found only one result and it is remove everything inside code and it works good but when i try to import some reducer inside redux config file everything is working slowly and crashing on weak devices. now i have not any idea where is loop and what I need to do.

import AsyncStorage from '@react-native-async-storage/async-storage';
import {createStore, combineReducers, applyMiddleware} from 'redux';
import ReduxThunk from 'redux-thunk';
import {persistStore, persistReducer} from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';

import * as ActionTypes from './types';
import {composeWithDevTools} from 'redux-devtools-extension';

import authReducer from './reducers/auth';

const persistConfig = {
   key: 'root',
   storage: AsyncStorage,
   whitelist: [], // which reducer want to store
};

const appReducer = combineReducers({
   auth: authReducer
});

const rootReducer = (state, action) => {
   if (action.type === ActionTypes.AUTH_LOGOUT_REQUEST) {
      state = undefined;
   }

   return appReducer(state, action);
};

const pReducer = persistReducer(persistConfig, rootReducer);

const middleware = applyMiddleware(ReduxThunk, apiMiddleware);

const store = createStore(pReducer, composeWithDevTools(middleware));

const persistor = persistStore(store);

export {store, persistor};

my packages:

  • "react": "17.0.1",
  • "expo": "40.0.0",
  • "react-native": "~0.63.4",
  • "@react-native-async-storage/async-storage": "1.15.13",
  • "react-redux": "7.2.4",
  • "redux": "4.1.2",
  • "redux-devtools-extension": "2.13.9",
  • "redux-persist": "6.0.0",
  • "redux-thunk": "2.3.0",

Solution

  • I put the action types in a .tsx(enum) file.

    it is solution for me.

    before:

    export const AUTH_LOGIN_REQUEST = '[Auth] Login request';
    export const AUTH_LOGIN_SUCCESS = '[Auth] Login success';
    export const AUTH_LOGIN_FAILURE = '[Auth] Login failure';
    
    

    after:

    export const enum ActionTypes{
       AUTH_LOGIN_REQUEST = '[Auth] Login request',
       AUTH_LOGIN_SUCCESS = '[Auth] Login success',
       AUTH_LOGIN_FAILURE = '[Auth] Login failure',
    }