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 }