-
SummaryFollowing the persist documentation I've been trying to access The reproduction contains an example Error
Link to reproduction
Environment
|
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 13 replies
-
|
It looks like this is caused by the fact that if you don't provide the Here's a repro setting a dummy storage implementation: https://snack.expo.dev/@michal.bar/zustand-persist-undefined-custom-storage. Once a storage option has been set the Should the whole |
Beta Was this translation helpful? Give feedback.
-
I think that for now updating the documentation to inform users of this issue should suffice, as it can be resolved by simply passing a noop storage. If more bug reports appear then I could try implementing the necessary modifications to solve the problem. That's also a nice solution, but I'm working with a monorepo and I wanted to avoid including My current solution is as follows:
export const usePersistence = create(
combine(
{
local: null as StateStorage | null,
secure: null as StateStorage | null,
noop: {
getItem: () => null,
setItem: () => {},
removeItem: () => {},
} satisfies StateStorage,
},
() => ({})
)
);
export const configurePersistence = ({
local,
secure,
}: ConfigurePersistenceParams) => {
if (local) {
usePersistence.setState({ local });
}
if (secure) {
usePersistence.setState({ secure });
}
};
export const useAuthService = create(
persist(
combine(
{
isInitialised: false as boolean,
accessToken: null as string | null,
refreshToken: null as string | null,
},
(set, get) => ({
// actions
})
),
{
name: 'auth-service',
version: 0,
skipHydration: true,
// We have to pass a default NOOP implementation
// @see https://github.com/pmndrs/zustand/discussions/1795
storage: createJSONStorage(() => usePersistence.getState().noop),
onRehydrateStorage: () => (state) => {
state?.setInitialised(true);
},
}
)
);
export const configureAuthService = ({
persistence,
}: ConfigureAuthServiceOptions) => {
if (persistence) {
useAuthService.persist.setOptions({
storage: createJSONStorage(() => persistence),
});
useAuthService.persist.rehydrate();
} else {
useAuthService.setState({ isInitialised: true });
}
};
import * as SecureStore from 'expo-secure-store';
configurePersistence({
secure: {
getItem: SecureStore.getItemAsync,
setItem: SecureStore.setItemAsync,
removeItem: SecureStore.deleteItemAsync,
},
});
configureAuthService({
persistence: usePersistence.getState().secure,
});This way I can use the |
Beta Was this translation helpful? Give feedback.
-
|
@MrPumpKing interesting I was thinking in three repos/monorepos const defaultPersistConfig = {...}
// useAuthService/core
export const createUseAuthService = (persistConfig) => create(persist(..., { ...defaultPersistConfig, ...persistConfig }))const noop = () => {}
const storage = {
getItem: noop,
setItem: noop,
removeItem: noop,
}
// useAuthService/react
export const useAuthService = createUseAuthService({ storage })import * as SecureStore from 'expo-secure-store'
const storage ={
getItem: SecureStore.getItemAsync,
setItem: SecureStore.setItemAsync,
removeItem: SecureStore.removeItemAsync,
}
// useAuthService/native
export const useAuthService= createUseAuthService({ storage }) |
Beta Was this translation helpful? Give feedback.
-
|
@dbritto-dev the problem with this approach is that my react package has some hooks that rely on the Having to create different instances for apps would force me to inject the service using the Context API, and that's also something I wanted to avoid. |
Beta Was this translation helpful? Give feedback.
-
Hmmm but web and native have different instances. It's not like you can share same instance between web and native. My suggestion is not worry about having an extra dep on your |
Beta Was this translation helpful? Give feedback.
-
That's what I want to avoid. For example
import { useAuthService } from '../auth';
const useData = () => {
const isAuthenticated = useAuthService((state) => state.isAuthenticated);
return useQuery({
queryFn: () => { ... },
enabled: isAuthenticated
})
}If
import type { AppProps } from 'next/app';
import { configureAuthService, usePersistence, useData } from '@company/react';
configureAuthService({
persistence: usePersistence.getState().noop
});
export default function MyApp({ Component, pageProps }: AppProps) {
const { data } = useData();
return <Component {...pageProps} />;
}
import * as SecureStore from 'expo-secure-store';
import { configureAuthService, usePersistence, useData } from '@company/react';
configurePersistence({
secure: {
getItem: SecureStore.getItemAsync,
setItem: SecureStore.setItemAsync,
removeItem: SecureStore.deleteItemAsync,
},
});
configureAuthService({
persistence: usePersistence.getState().secure,
});
const App: FC = () => {
const { data } = useData();
}
export default App;
I mainly wanted to avoid downloading native packages in CI builds. I know they can be cached but preview builds with no cache took longer the more native modules I had (at least that was my experience with Nx monorepos on Vercel, not sure if it would be the case with Turbo). I don't use Expo nor react-native-web to build the web apps - I share the logic but have separate UIs. |
Beta Was this translation helpful? Give feedback.
-
|
#1795 (reply in thread) |
Beta Was this translation helpful? Give feedback.
-
|
Hi everyone, /* eslint-disable linebreak-style */ // Redux const MyTheme = { }; const App = () => { )} import { persistStore, persistReducer } from 'redux-persist'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { encryptTransform } from 'redux-persist-transform-encrypt'; import authReducer from './auth/reducer'; if (DEV) { const encryptor = encryptTransform({ const rootReducer = combineReducers({ // Middleware: Redux Persist Config transforms: [encryptor], const sagaMiddleware = createSagaMiddleware(); // Middleware: Redux Persist Persisted Reducer const store = createStore(persistedReducer, composeEnhancers(applyMiddleware(sagaMiddleware))); sagaMiddleware.run(authServicesSaga); export { |
Beta Was this translation helpful? Give feedback.
-
|
"dependencies": { |
Beta Was this translation helpful? Give feedback.
It looks like this is caused by the fact that if you don't provide the
storageoption when creating the store, thenlocalStorageis used by default, which isundefinedon React Native.Here's a repro setting a dummy storage implementation: https://snack.expo.dev/@michal.bar/zustand-persist-undefined-custom-storage. Once a storage option has been set the
useBearStore.persistis no longerundefined.Should the whole
persistobject be undefined because of this? Maybe it's something worth mentioning in the docs? In my case I didn't set thestoragedirectly as I needed to set it dynamically based on some conditions usingsetOptions.