Redux-persist: TypeError: store.getState is not a function in Electron

[megancooper]

Hello! I haven't been able to find a solution to my issue so I'm posting here in hopes of help. I am currently creating an electron + react app and I want to persist my redux state. I set the store up as follows:

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
import autoMergeLevel1 from 'redux-persist/lib/stateReconciler/autoMergeLevel1';

const persistConfig = {
  key            : 'root',
  storage,
  stateReconciler: autoMergeLevel1
};
const persistedReducer = persistReducer(persistConfig, rootReducer);


// https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu
// Sanitizes large artwork to avoid lag and undesired behavior
const actionSanitizer = (action) => (
  action.type === 'ADD_FILE' && action.libraryEntry ?
    { ...action,
      libraryEntry: {
        artwork: '<<LONG_LIST_OF_FILES>>'
      }
    } : action
);

const composeEnhancers =
  typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      name          : 'Melo',
      actionSanitizer,
      stateSanitizer: (state) => state.library.files ? {
        ...state, library: {
          files: '<<LONG_LIST_OF_FILES>>'
        }
      } : state
    })
    : compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk)
);

const configureStore = (initialState) => {
  const store = createStore(persistedReducer, initialState, enhancer);
  const persistor = persistStore(store);
  return { store, persistor };
};

const initialState = {};

const store = configureStore(initialState);

export default store;

And added PersistGate to my app as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import MainView from './app';
import './styles/global.scss';
import { BarLoader } from 'react-spinners';
import { PersistGate } from 'redux-persist/integration/react';

const loading = <BarLoader color={'#3E8BD3'} size={25}/>;

require('dotenv').config();

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={loading}>
      <MainView/>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

When I run my app, I see the following error in the electron window:

Provider.js:17 Uncaught TypeError: store.getState is not a function
    at new Provider (Provider.js:17)
    at constructClassInstance (react-dom.development.js:11787)
    at updateClassComponent (react-dom.development.js:15265)
    at beginWork (react-dom.development.js:16265)
    at performUnitOfWork (react-dom.development.js:20285)
    at workLoop (react-dom.development.js:20326)
   ...

Is there something I'm doing wrong? Thanks for the help 🙏

[richardbarrell-calvium]

I think this is your issue: your configureStore function returns an object with properties {store, persistor}, but you're assigning const store = configureStore(...). Then, later, when the other module tries to call store.getState(), it's getting the {store, persistor} object instead of the store itself.

If you changed that line to const {store} = configureStore(...);, I think you should no longer see that TypeError.

[megancooper]

@richardbarrell-calvium Thank you so much! I can't believe I've been stressing so hard over a simple object destructuring issue.