action.rehydrate is not a function

Question

I have been getting the following error since sometime in my console, i have no idea what it means and why it is originating. Please spread some light on this matter.

it says:

persistReducer.js:50 Uncaught TypeError: action.rehydrate is not a function
at _rehydrate (persistReducer.js:50)
at persistReducer.js:54

redux-persist version on package.json: "^5.6.11" locked version: "5.9.1"

Store configuration code:

import thunk from 'redux-thunk';
import { persistStore } from 'redux-persist';
import { History, createBrowserHistory } from 'history';
import { createUserManager, loadUser } from "redux-oidc";
import { routerReducer, routerMiddleware } from 'react-router-redux';
import { createStore, applyMiddleware, compose, combineReducers, GenericStoreEnhancer, Store, StoreEnhancerStoreCreator, ReducersMapObject } from 'redux';

import * as StoreModule from './reducers';
import { ApplicationState, reducers } from './reducers';

import userManager from "./utils/userManager";

// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
const history = createBrowserHistory({ basename: baseUrl });

export default function configureStore(history: History, initialState?: ApplicationState) {
    // Build middleware. These are functions that can process the actions before they reach the store.
    const windowIfDefined = typeof window === 'undefined' ? null : window as any;
    // If devTools is installed, connect to it
    const devToolsExtension = windowIfDefined && windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__ as () => GenericStoreEnhancer;


    const createStoreWithMiddleware = compose(
        applyMiddleware(thunk, routerMiddleware(history)),
        devToolsExtension ? devToolsExtension() : <S>(next: StoreEnhancerStoreCreator<S>) => next
    )(createStore);

    // Combine all reducers and instantiate the app-wide store instance
    const allReducers = buildRootReducer(reducers);
    const store = createStoreWithMiddleware(allReducers, initialState) as Store<ApplicationState>;
    loadUser(store, userManager);

    // Enable Webpack hot module replacement for reducers
    if (module.hot) {
        module.hot.accept('./reducers', () => {
            const nextRootReducer = require<typeof StoreModule>('./reducers');
            store.replaceReducer(buildRootReducer(nextRootReducer.reducers));
        });
    }
    const persistor = persistStore(store);
    return { store, persistor };
}

function buildRootReducer(allReducers: ReducersMapObject) {
    return combineReducers<ApplicationState>(Object.assign({}, allReducers, { routing: routerReducer }));
}

// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = (window as any).initialReduxState as ApplicationState;
export const { store, persistor } = configureStore(history, initialState);

@riwu that is a file from node_modules of library redux-persist. — Skaranjit, Apr 25 '18 at 04:13
add your code that imports and uses `redux-persist` (probably somewhere in your Redux store creation file) — Roy Wang, Apr 25 '18 at 04:19

Alireza · Accepted Answer · 2019-12-06T08:34:44.967

31

if you are working on localhost and using redux-devtools try to check Access File Url checkbox on extension options.

you can manage your chrome extensions by typing chrome://extensions/ in the address bar or by going to the setting and chose extensions from left menu.

edited Dec 06 '19 at 08:34

answered Sep 01 '18 at 13:41

Alireza

2,319
2
23
35

That one fixed it for me. – Ch4t4r Sep 12 '18 at 17:59
how did this fix? – user2167582 Dec 03 '19 at 03:41
For me, this error appeared with no apparent cause. Toggling this setting on and reloading my app worked. I could then toggle the setting off again without reintroducing the error. – Ninjakannon Nov 23 '21 at 01:18

score 1 · Answer 2 · answered Jun 06 '18 at 23:24

1

I get this error when using redux devtools, remove this and it should go away.

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

answered Jun 06 '18 at 23:24

ericbowden

2,177
1
19
21

Remove it from where? – Zakaria Bougroug Aug 04 '23 at 04:09

score 0 · Answer 3 · answered Apr 25 '18 at 04:56

Your code is using API of an older redux-persist version.

Refer to Basic Usage for the updated API:

import { persistStore, persistReducer } from 'redux-persist'

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

const allReducers = persistReducer(persistConfig, buildRootReducer(reducers));

action.rehydrate is not a function

3 Answers3