Redux store (AsyncStorage engine) freezes iPhone when calling store.dispatch

Viewed 222

For our ReactNative app we are eliminating loading times by using internal storage. Initially the data from the redux store makes an immediate render possible while an api call is made to update the data. After the api call is made the newest data is stored with store.dispatch.

Everything works well on Android and simulators, but on iPhone X the app freezes when store.dispatch is called. Deleting the dispatch "solves" the issue.

What could the problem be? Should we try another storage engine?

Edit: I created a basic redux app based on our coding: https://snack.expo.io/@adriaandebolle/react-native---redux-store. Using the Expo client this works fine on iPhone. So it wasn't possible to reproduce the issue...

Our store.js file:

import {createStore, compose, applyMiddleware} from 'redux';

import thunk from 'redux-thunk';

import {persistCombineReducers, persistStore} from 'redux-persist';
import AsyncStorage from '@react-native-community/async-storage';

import {encryptTransform} from 'redux-persist-transform-encrypt';

const encryptor = encryptTransform({
  secretKey: '******',
  onError: function (error) {
    // Handle the error.
    console.log(error);
  },
});

const config = {
  key: 'primary',
  storage: AsyncStorage,
  transforms: [encryptor],
};

import {reducer as servicesReducer} from 'app/services/reducer';

const appReducer = persistCombineReducers(config, {
  services: servicesReducer,
});

const enhancer = compose(applyMiddleware(thunk));

const store = createStore(appReducer, enhancer);

const persistor = persistStore(store);

export {store, persistor};

Dependencies package.json

{  
  "dependencies": {
    "npm": "^6.14.8",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.9.4",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-persist-transform-encrypt": "^3.0.1",
    "redux-thunk": "^2.3.0",
    "remote-redux-devtools": "^0.5.16",
  },
}
1 Answers

It was not an OS issue, but it is the amount of data I store seemingly. There is a size limit with AsyncStorage which some accounts surpass. Some warning could be interesting or a way to find out which reducer is causing to reach limit.

Using arr.splice() reduces heavily the size of the arrays stored. It all works normal. But it would be nice to know how well we are in the "safety zone".

Related