redux-persist icon indicating copy to clipboard operation
redux-persist copied to clipboard

redux-presist not working with android

Open Moemen02 opened this issue 2 years ago • 8 comments

So I have just started an expo project, and I am using redux-presist. My problem is that the state is loading fine on ios. But it's not working on android. When I save my code with live reload it is working fine. But when I restart the app it is not getting the storage data. It is only getting it when I save a change in the code (so when it live reloads). There are no problems on IOS.

this is my store.js:

import {combineReducers, configureStore} from '@reduxjs/toolkit'
import {setFirstname, userSlice} from "./user/userSlice";
import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistStore, persistReducer } from 'redux-persist'
import {FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE} from "redux-persist/es/constants";

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

const persistedReducer = persistReducer(persistConfig, userSlice.reducer)

export const store = configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            serializableCheck: {
                ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
            },
        }),
})

export const persistor = persistStore(store)

export default store

And this is my app.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet } from 'react-native';
import React, {useEffect, useState} from 'react';
import BottomNav from "./app/navigations/BottomNav";
import 'react-native-gesture-handler'
import StackNav from "./app/navigations/StackNav";
import {NavigationContainer} from "@react-navigation/native";
import {navigationRef} from "./app/navigations/RootNavigation";
import {Provider} from "react-redux";
import {persistor, store} from "./app/store/store";
import {PersistGate} from "redux-persist/integration/react";
import SpinningLogo from "./app/ui/SpinningLogo";

export default function App() {
    const [isAuth, setAuth] = useState(null)

    useEffect(() => {
        console.log(store.getState().userToken)
        if (store.getState().userToken){
            setAuth(true)
        }
    })

    return (
        <Provider store={store}>
            <PersistGate loading={<SpinningLogo/>} persistor={persistor}>
                <NavigationContainer ref={navigationRef}>
                    <StatusBar style="light" />
                    {isAuth ? (
                        <BottomNav/>
                    ): <StackNav />}
                </NavigationContainer>
            </PersistGate>
        </Provider>
    );
}

const styles = StyleSheet.create({
  container: {
    
  },
});

Moemen02 avatar Feb 16 '23 02:02 Moemen02

We've run into the same problem with Android. Has anyone had any luck addressing it? Zero-ing to null-ing the timeout value hasn't worked.

mdescalzo avatar Mar 20 '23 20:03 mdescalzo

@mdescalzo I did not find any solutions, I am just storing it some data in my local storage now. I wanted to use redux to store and retrieve my user-token. At the moment I am retrieving it with AsyncStorage, it's a bit uglier in my opinion, but it does the job. Please let me know if you find a working solution!

Moemen02 avatar Mar 20 '23 20:03 Moemen02

We're using it to persist user settings. It was working smoothly for months, but stopped recently. We haven't yet sorted a solution. We may have to more directly implement AsyncStorage, but that will get ugly. We may consider something like redux-localstorage-simple.

mdescalzo avatar Mar 21 '23 21:03 mdescalzo

@Moemen02 I just figured out how to get it working on our project. We were running into storage limit issues. I removed our largest reducer from the whitelist and it started working again. Are you storing your entire state redux state object? Trying using the whitelist to persist only the userToken.

mdescalzo avatar Mar 24 '23 22:03 mdescalzo

Yes. I also needed AsyncStorage_db_size_in_MB=500 in my gradle.properties And this: https://github.com/react-native-async-storage/async-storage/issues/537#issuecomment-781047700

coayscue avatar Apr 26 '23 05:04 coayscue

I have run into the same problem with Android, and I solve it by increasing the storage size of asyncStorage You can use this code https://github.com/react-native-async-storage/async-storage/issues/537#issuecomment-781047700


import android.database.CursorWindow; import java.lang.reflect.Field;

AsselAlAssel avatar Sep 12 '23 08:09 AsselAlAssel

I've fixed the same below It worked and hopefully yours can too

import java.lang.reflect.Field;
import android.database.CursorWindow;

try {
      Field field = CursorWindow.class.getDeclaredField("sCursorWindowSize");
      field.setAccessible(true);
      field.set(null, 500 * 1024 * 1024); //500MB
    } catch (Exception e) {
      if (BuildConfig.DEBUG) {
        e.printStackTrace();
      }
    }
image

ref: https://github.com/react-native-async-storage/async-storage/issues/537#issuecomment-781047700

nguyentrancong avatar Feb 13 '24 08:02 nguyentrancong

Give a try to my library

https://github.com/Redux-Utils/react-native-redux-persist/

I made it especially for react-native and expo.

So far you can use AsyncStorage and Expo Secure Store

gabriel-logan avatar Aug 04 '24 22:08 gabriel-logan