Comments (10)
Hi John. By trying your package, I found why my redux-persist wasn't working. It was because I didn't add the right value in the whitelist (lol). After the fix I did, I deleted node modules folder and npm i
to be sure it was not using a cache version of your package John and it was still working. Thanks for your time though.
const slicePersistConfig = {
key: SLICE,
storage: AsyncStorage,
version: 1,
whitelist: ["settings"],` // I changed the value here.
};
Which means redux-persist is apparently working in my project with those versions:
"@react-native-async-storage/async-storage": "1.21.0",
"@react-navigation/native": "^6.1.9",
"@reduxjs/toolkit": "^2.1.0",
"expo": "~50.0.5",
"react": "18.2.0",
"react-native": "0.73.2",
"react-redux": "^9.1.0",
"redux-persist": "^6.0.0"
Here is my implementation in case it could help someone else:
store.js
import { configureStore, combineReducers } from "@reduxjs/toolkit";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {
persistStore,
persistReducer,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from "redux-persist";
import { sliceReducer } from "./slice";
const slicePersistConfig = {
key: "slice",
storage: AsyncStorage,
version: 1,
whitelist: ["settings"],
};
const reducers = combineReducers({
slice: persistReducer(slicePersistConfig, sliceReducer),
});
export const store = configureStore({
reducer: reducers,
devTools: process.env.NODE_ENV !== "production",
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
}),
});
export const persistor = persistStore(store);
slice.js
import { createSlice } from "@reduxjs/toolkit";
export const slice = createSlice({
name: "slice",
initialState: {
settings: {
isFirstLaunch: true,
selectedTheme: undefined,
},
},
reducers: {
setSelectedThemeInSlice: (slice, action) => {
slice.settings.selectedTheme = action.payload;
},
},
});
export const { setSelectedThemeInSlice } = slice.actions;
export const sliceReducer = slice.reducer;
from redux-persist.
Glad you got it working! I was trying to set this up in a new project, so it wasn't totally clear why it started working when it did 😅
from redux-persist.
Anyone else seeing this with RN 0.73? We are due to upgrade soon so want to know if this is a showstopper. Any news on your side @OmarBasem ?
Edit: And @OmarBasem, did you debug exactly what happens in the handlePersistorState function causing bootstrapped state not being set to true?
redux-persist/src/integration/react.ts
Line 34 in d8b01a0
from redux-persist.
@eithe No news from my side.
Edit: And @OmarBasem, did you debug exactly what happens in the handlePersistorState function causing bootstrapped state not being set to true?
Nope, I did not debug exactly what happens. I wasn't in urgent need of 0.73 so I rolled back to 0.72.
If you find anything let me know please.
from redux-persist.
I'm trying to use redux-react in my React native application version 0.72.8. When I try to import PersistGate
like below it can't be accessible.
import {PersistGate} from 'redux-persist/integration/react'
I checked the node_modules and found out the integration
folder is not even there. Any solution for this?
from redux-persist.
I copied/pasted my redux implementation from a RN 0.72 project to a new RN 0.73 project and it's not working for me neither although it's working correctly on my RN 0.72 project.
from redux-persist.
Same problem here on Expo 50 / React Native 0.73.
from redux-persist.
Does anyone know if this has a chance to be fixed anytime soon?
from redux-persist.
I've got a solution that's working for me, which you can install with `npm install @johnhamlin/redux-persist.' (You'll have to update all of your import statements too.)
Long story short(er), the code in this repo was updated to version 6.1 three years ago, but that was never published for whatever reason. The latest on npm is 6.0. patch-package
didn't like the version mismatch and broke, so I published a new npm package instead.
The only change I made was to update @types/react
to the current version, 18.2.51, from 17.0.16. That fixed a problem where TypeScript was complaining that <PersistGate>
wasn't a JSX component. Whether that fixed the problem, or the problem was fixed somewhere else in the code changed from 6.0 to 6.1, I'm not sure, but it's working for me and I'm moving on. I'll make a PR with that change, but no PRs have been approved since 2021.
I've tested my version on Expo SDK 50 / React Native 0.73. It works in development and production builds on my iPhone and in simulators. Hope this helps others!
from redux-persist.
So to conclude you are also seeing that it's working with RN 0.73 and React 18.x without your 6.1 package @johnhamlin ?
from redux-persist.
Related Issues (20)
- Do you support persist bigint when serialize? HOT 3
- Importing PersistGate results in compilation error HOT 1
- Jest snapshot is always created as null in react native
- Persist not working after page reload or refresh HOT 3
- failed to preserved initial state value at rehydrate
- PersistGate in SSR applications rendering app twice when using React v18 HOT 3
- Documentation for Migration is unnecessary complicated. HOT 1
- Getting got unexpected undefined error while changing redux state HOT 1
- getting error: A non-serializable value was detected in an action HOT 5
- createStore() is old
- Clear Redux Persist Data on App uninstall in IOS React Native HOT 1
- Support for Redux v5 and RTK v2 HOT 10
- state is null HOT 1
- data migration security and automatization
- Move project to new repo? HOT 13
- redux-persist failed to create sync storage. falling back to noop storage | Next js HOT 3
- Vitest - The slice reducer for key "reducer name" returned undefined during initialization
- Option to disable storage creation error for dynamic stores
- storage.getItem is not a function (it is undefined) - RN 0.73.4 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from redux-persist.