Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using custom storage engine on React Native #599

Closed
ghost opened this issue Nov 10, 2020 · 15 comments · Fixed by #836
Closed

Using custom storage engine on React Native #599

ghost opened this issue Nov 10, 2020 · 15 comments · Fixed by #836

Comments

@ghost
Copy link

ghost commented Nov 10, 2020

For some reason I cannot seem to be able to make my custom storage engine working on RN. What works in a clean CRA web project doesn't in a clean CRNA project.

I have created a new project by running expo init and choosing the Bare workflow with minimal settings. I've installed the easy-peasy package (4.0.1) and modified the App.js as such:

import React from "react";
import { Button, StyleSheet, View } from "react-native";
import {
  action,
  createStore,
  persist,
  StoreProvider,
  useStoreActions
} from "easy-peasy";

const store = createStore(
  persist(
    {
      count: 1,
      add: action(state => {
        state.count += 1;
        console.log("STATE CHANGE", state.count);
      })
    },
    {
      storage: {
        getItem: key => {
          console.log("GET_ITEM", key);
        },
        setItem: (key, value) => {
          console.log("SET_ITEM", key, value);
        },
        removeItem: key => {
          console.log("REMOVE_ITEM", key);
        }
      },
      allow: ["count"]
    }
  )
);

const MyButton = () => {
  const add = useStoreActions(actions => actions.add);
  return <Button title="Press" onPress={() => add()} />;
};

export default function App() {
  return (
    <StoreProvider store={store}>
      <View style={styles.container}>
        <MyButton title="Press" />
      </View>
    </StoreProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});

As I launch the project in my iOS simulator, GET_ITEM [EasyPeasyStore][0] is logged.
As I press the button, STATE CHANGE 2 is logged.
However, SET_ITEM never gets logged.

As mentioned, the same code on a web project works fine and SET_ITEM... is logged.

Any ideas?

@yixuan98
Copy link

Same issue after upgrading to v4.0.1, setItem() of custom storage isn't called when changing persisted state on RN 0.63.3.

@luziczek
Copy link

I can confirm the same and also AsyncStorage doesn't seem to work.
On v4.1.0-beta.4 also not working with RN 0.63.3.

@Thram
Copy link

Thram commented Nov 23, 2020

Same here with Easy Peasy 4.0.1

@GollyJer
Copy link

Same. Just tried to switch over to easy-peasy's persist. It seems so much easier but kept running into issues before finding this thread. Should have searched first!

@GollyJer
Copy link

GollyJer commented Jan 14, 2021

Does anyone know why setItem isn't being called?
I'm trying to create a local patch but looking at the code I don't quite understand what's causing it to not be called.

@ctrlplusb
Copy link
Owner

Hey all;

Apologies for the lack of response on this. I've had to take some personal time.

I would appreciate it if someone could share a basic repo that I could use to test this. I have an upcoming version that I feel may address this issue.

💜

@GollyJer
Copy link

GollyJer commented Jan 14, 2021

removed useless post

@GollyJer
Copy link

GollyJer commented Jan 16, 2021

Hi @ctrlplusb I had to switch back to redux-persist for now.

This is an iOS issue. Here is a Snack reproduction.
easy-peasy-persist-bug

Run it with the Android emulator and SET_ITEM is logged.
Run it with the iOS emulator and SET_ITEM is never logged.

@ctrlplusb
Copy link
Owner

Thanks for posting @GollyJer 🙏

@duygiangdg
Copy link

This is caused by an issue of RN 0.62.2, so requestIdleCallback is never called on iOS.

Before it is fixed, you can add this line before your createStore(), so easy-peasy will use requestAnimationFrame instead of requestIdleCallback

window.requestIdleCallback = null;

@GollyJer
Copy link

Thanks for the info @duygiangdg!

You can see your workaround in affect by running the iOS simulator here.
easy-peasy-persist-bug-workaround

👍

@luziczek
Copy link

It solved the issue for me! Thanks :)

@6thpath
Copy link

6thpath commented Jul 19, 2021

any update on this issue ?

@jmyrland
Copy link
Collaborator

Hi @ctrlplusb I had to switch back to redux-persist for now.

This is an iOS issue. Here is a Snack reproduction. easy-peasy-persist-bug

Run it with the Android emulator and SET_ITEM is logged. Run it with the iOS emulator and SET_ITEM is never logged.

Thanks for the reproduction Snack, @GollyJer! As I don't have a mac to test on, this really helped troubleshooting the issue. This should now be fixed in 6.0.1. Sorry it's taken a while!

@GollyJer
Copy link

GollyJer commented Jun 16, 2023

I mean, what's 2 years amongst friends. 😛 Thanks!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: No status
Development

Successfully merging a pull request may close this issue.

8 participants