rt2zz / redux-persist

persist and rehydrate a redux store
MIT License
12.94k stars 866 forks source link

#HELP I can't use PersistGate in typescript #1351

Open thereisnoway10 opened 2 years ago

thereisnoway10 commented 2 years ago

Cannot find type definition file for 'integration'. The file is in the program because: Entry point for implicit type library 'integration' TS2688

I've this error. I try to import persistReducer from redux-persist to solve this according to some suggestion internet but it did not solve. image

I also add typeroots property to tsconfig but it did not help too image

And as a last suggestion I add file property but still getting the same error. Can someone help me with that image

sarensw commented 2 years ago

Not sure whether persistReducer is actually needed here.

The way to set this up in ts is:

import { persistStore } from 'redux-persist'

const persistor = persistStore(store)

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      ...
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)
TrevorBurnham commented 2 years ago

@sarensw How do you pass configuration options to redux-persist in that setup? persistReducer accepts a PersistConfig option; persistStore does not.

sarensw commented 2 years ago

@TrevorBurnham , you are right. I have to do this when configuring the store:

import { configureStore, combineReducers } from '@reduxjs/toolkit'
import storage from 'redux-persist/lib/storage'
import {
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER
} from 'redux-persist'

const reducers = combineReducers({
  ... // add all your reducers here
})

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

const persistedReducer = persistReducer(persistConfig, reducers)

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