[Migrating to modern redux] Possible Unhandled Promise Rejection TypeError: Object is not a constructor

[Saad-Bashar]

Hi, recently I have been trying to migrate our old redux to the redux toolkit in our react native app. I successfully created a separate branch with the redux toolkit working correctly. However, suddenly after a few days, when I returned to this branch my app started to throw this error Possible Unhandled Promise Rejection: TypeError: Object is not a constructor I confirmed it to be related to confgureStore from redux-toolkit. When I am not using it I do not get this error. Whatever I try to do now I always get this error message. I tried to reset yarn, metro server, etc.

This is my store setup,

let persistor = null;
const sagaMiddleware = createSagaMiddleware();
const config = {
  key: 'root',
  storage: AsyncStorage,
  transforms: [
    immutableTransform({
      whitelist: ['user', 'notification', 'shifts', 'settings'],
    }),
  ],
  whitelist: ['user', 'notification', 'shifts', 'settings'],
};

export default function configureStore() {
  const args = [sagaMiddleware].filter(Boolean);
  const reducers = persistReducer(config, rootReducer());
  const enhancers = [applyMiddleware(...args)];
  const persistConfig = {enhancers};

  const store = toolkitConfigureStore({
    reducer: reducers,
    middleware: getDefaultMiddleware =>
      getDefaultMiddleware({
        immutableCheck: false,
        serializableCheck: false,
      }).concat(api.middleware),
    enhancers,
  });
  persistor = persistStore(store, persistConfig, () => {});
  sagaMiddleware.run(rootSaga);

  setupListeners(store.dispatch);
  return {store, persistor};
}

and in App.js, I have the following,

let {store, persistor} = configureStore();
const Root = () => {
  return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <AppWithNavigationStates />
        </PersistGate>
      </Provider>
  );
};

Any suggestion on this? Thanks a lot!

[phryneas]

That error message should also contain a stack trace, pointing at a specific line in your code. Could you add that?

[phryneas]

Generally though, you should .concat your sagaMiddleware to the middlewares, not add another applyMiddleware enhancer. (Please also note that going to the future we recommend not using sagas for new code.)

[Saad-Bashar]

Unfortunately react native is not helping here it seems :(

Totally agree about the saga. As this project was using saga, we will need to remove all the saga with RTKQ eventually but for now we are stuck.

[Saad-Bashar]

This is another screenshot of the error message,

[phryneas]

Unfortunately, that makes it very difficult to help. All I can suggest is that you do your store setup step by step. Here you are adding an api, the saga middleware, listeners and whatnot all at once. Do one thing after the next. Once that doesn't give you an error, do the next step.

Blank state.
Blank state with saga.
Blank state with saga and persisted reducer.
Add the api.
Etc.

[Saad-Bashar]

I agree, thanks a lot! I was trying to follow this as well. Will continue to do so. Just a question, I have the plain redux installed as well besides the rtk. Will that cause any issue?

[phryneas]

You don't need it, since plain Redux is part of RTK. But it probably won't cause any problems either.

[Saad-Bashar]

I managed to fix that issue, turns out I had to do some cleanups. Thanks a lot, @phryneas for your quick response. You are amazing!

yarn cache clean
rm -rf node-modules
rm -rf yarn.lock
yarn