Question: How to use this with redux-persist?

[SeedyROM]

I've been experimenting with getting redux-persist to integrate with my current project that's using react-starter-kit but I'm already hitting some walls and obscure errors.

First issue is a middleware that doesn't seem to know how to handle the register call for the persist middleware (which is caused by serializable-state-invariant-middleware).

Second issue is that PersistGate never renders, I can only assume this is because rehydrate is never called? I'm not really sure what's going on there, it's probably by own fault.

If this isn't the place to ask I'm sorry, but using redux-persist seems like a very common use case.

Update 1:

I solved the serializable-state-invariant-middleware issue by simply adding thunk myself. (Note it needs to be manually installed!)

Here's my store.ts:

import logger from "redux-logger";
import { configureStore } from "redux-starter-kit";
import thunk from "redux-thunk";
import rootReducer from "./reducers";

const store = configureStore({
    reducer: rootReducer,
    middleware: [thunk, logger],
});

export default store;

[markerikson]

I haven't used redux-persist myself. What does this "register" call involve?

[omorhefere]

Hey @SeedyROM where you able to figure this out?

[Vigrond]

Hi I was able to get these two working elegantly

It appears you already solved issue 1

For issue 2:
We want to avoid some automation provided by starter-kits configureStore
Instead, we used redux's combineReducers, call persistReducer on that, and then pass it to configureStore

Example:

// These can come from starter-kits createSlice, which is nice
import reducerOne from './reducerOne'
import reducerTwo from './reducerTwo'

const reducers = combineReducers({
  reducerOne,
  reducerTwo
})

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

const persistedReducer = persistReducer(persistConfig, reducers)
...

const store = configureStore({
  reducer: persistedReducer,
  ...
})

[SeedyROM]

Interesting, I solved my problem by simply creating the persistStore in my StoreWrapper component module . I have no idea why this worked.

Maybe your solution is the actual right way to handle this!

[johnantoni]

this is excellent, thanks @SeedyROM solved my problem.

[markerikson]

Seems to be resolved, so closing.

[FareheSoheil]

@SeedyROM Hi, I want to use redux-persist along with rsk too , but I'm just too dump to know how :(. for your first issue, you seem to have a store.ts file, (seems you are using typescript but I'm using js) but rsk only has configureStore.js at src/store. Can you help me how to do this?

[brandtnewlabs]

This thread solved my problems! Thanks for sharing your two solutions @SeedyROM & @Vigrond

[CallumHemsley]

Hello, I've tried your guys solutions as shown here:

const persistConfig = {
  key: 'root',
  storage: createSecureStore(),
  whitelist: ['authReducer', 'pageReducer'], //Things u want to persist
  blacklist: [], //Things u dont
};

// Middleware: Redux Persist Persisted Reducer
const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = configureStore({
  reducer: persistedReducer,
  middleware: [applyMiddleware(
    createLogger(),
  )],
  devTools: process.env.NODE_ENV !== 'production',
});

let persistor = persistStore(store);

But I'm getting the following error:

TypeError: createStore.apply is not a function. 
(In 'createStore.apply(void 0, arguments)',
'createStore.apply' is undefined

is it possibly something to do with me using redux-persist-expo-securestore ?

[markerikson]

That makes it seem as if Redux isn't isn't installed correctly, because createStore should be coming from the redux package (which is a straight dependency of @reduxjs/toolkit).

Check your app's installation and see if Redux was actually installed.

[CallumHemsley]

Thanks for the fast reply Mark as usual. Here's my dependencies package.json:

"dependencies": {
    "@expo/samples": "~36.0.0",
    "@expo/vector-icons": "~10.0.0",
    "@react-navigation/web": "~1.0.0-alpha.9",
    "@reduxjs/toolkit": "^1.2.1",
    "automerge": "^0.12.1",
    "expo": "~36.0.0",
    "expo-asset": "~8.0.0",
    "expo-constants": "~8.0.0",
    "expo-font": "~8.0.0",
    "expo-google-app-auth": "^8.0.0",
    "expo-secure-store": "~8.0.0",
    "expo-web-browser": "~8.0.0",
    "immer": "^5.2.1",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-elements": "^1.2.7",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-web": "~0.11.7",
    "react-navigation": "~4.0.10",
    "react-navigation-stack": "~1.10.3",
    "react-navigation-tabs": "~2.6.2",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-persist-expo-securestore": "^2.0.0"
  }

Before installing redux toolkit I was able to use createStore fine. Any ideas?

[markerikson]

I'm asking if there's actually a redux folder in your node_modules.