rt2zz / redux-persist

persist and rehydrate a redux store
MIT License
12.91k stars 863 forks source link

I get error Illegal constructor when using rehydrate store #1352

Closed isekaimaou1109 closed 2 years ago

isekaimaou1109 commented 2 years ago

TypeError: Illegal constructor this is mine error. And when i see stack trace it look like about rehydrate store failure. The stack like below image image my store.js is like below:

import { configureStore, combineReducers } from '@reduxjs/toolkit'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

import formReducer from './features/form/form'
import modalReducer from './features/modal-status/modal'
import switchingReducer from './features/dark-light-status/mode'
import expandingReducer from './features/expand/expand'
import searchReducer from './features/query/search'

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

const rootReducer = combineReducers({
  modal: modalReducer,
  process: formReducer,
  switching: switchingReducer,
  expanding: expandingReducer,
  searching: searchReducer().search,
  data: searchReducer().data
})

const persistedReducer = persistReducer(persistConfig, rootReducer)

export default function createStore() {
  let store = configureStore({
    reducer: persistedReducer,
    devTools: true
  })
  let persistor = persistStore(store)
  return { store, persistor }
}

And form reducer like below:

import { createSlice } from '@reduxjs/toolkit'

export const formSlice = createSlice({
  name: 'process',
  initialState: {
    type: 'UNKNOWN',
    isLogined: false,
    username: null,
    clientId: null,
    avatarUri: null
  },
  reducers: {
    process(state, action) {
      console.log('state still run into this ' + JSON.stringify(action.payload))
      if(action.payload.type == 'LOGIN') {
        if('username' in action.payload && 'clientId' in action.payload && 'avatarUri' in action.payload) {
          return {
            ...state,
            type: 'LOGIN',
            isLogined: action.payload.isLogined,
            username: action.payload['username'],
            clientId: action.payload['clientId'],
            avatarUri: action.payload['avatarUri'],
          }
        }
      } else {
        return state
      }
    }
  }
})

// Action creators are generated for each case reducer function
export const { process } = formSlice.actions
export default formSlice.reducer

And below is my usage about useSelector in react component like:

const isLogined = useSelector(state => state.process.isLogined)

So i hope someone can help me about this error T-T thanks in advanced

isekaimaou1109 commented 2 years ago

Ya i got the solution is if you're using nextjs framework so in your pages/_app.js just modify from

<React.Fragment>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Component {...pageProps} />
      </PersistGate>
    </Provider>
  </React.Fragment>

To this:

<React.Fragment>
    <Provider store={store}>
      {/* <PersistGate loading={null} persistor={persistor}> */}
        <Component {...pageProps} />
      {/* </PersistGate> */}
    </Provider>
  </React.Fragment>

So i will close issue right now. And hope this will help someone out there