5
votes

When using redux-persist v6 in React Native, it causes click events and animations to go extremely slow. Tapping a button takes about 5 or 6 seconds before it performs the action. In the configureStore.ts if I change createStore() to take rootReducer instead of persistedReducer (and also comment out the PersistGate in index.tsx) then the app responsiveness speeds up again. (FYI, the rest of the app uses react-navigation with react-natigation-stack.)

Does anyone have any recommendations to get the app to respond quickly even while using reduxPersist?

index.tsx

import React from 'react';
import { Provider } from 'react-redux';
import { store, persistor } from './store/configureStore';
import { AppRegistry, View } from 'react-native';
import { MainNavigator } from './navigation/navigation';
import { PersistGate } from 'redux-persist/integration/react'
import { appId } from './config';

const App = () => {
  return (
    <Provider store={store} >
      <PersistGate
        loading={<View style={{ backgroundColor: '#ffc900' }} />}
        persistor={persistor}>
        <MainNavigator />
      </PersistGate>
    </Provider>
  )
}

AppRegistry.registerComponent(appId, () => App);

configureStore.ts

import AsyncStorage from '@react-native-community/async-storage';
import { createStore, compose, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import { rootReducer } from '../reducer/rootReducer';
import thunk from 'redux-thunk';

const persistConfig = {
  key: 'root',
  storage: AsyncStorage
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

let store = createStore(
  persistedReducer, // rootReducer,
  {},
  compose(applyMiddleware(thunk))
)

let persistor = persistStore(store)

export { store, persistor }

Is your state big? Are you using selectors?giotskhada
I am experiencing the exact same thing! I have a very large state, but i'm careful with my selectors - did you find a fix?James Trickey