Whenever I wrap my App with PersistGate it gives me "TypeError: users.map is not a function" in one component, otherwise it works fine

Question

As the title says, I'm mapping through an array I have from an api in UserCardList component and it works fine but once I wrap App with PersistGate, it gives me "TypeError: users.map is not a function" and the error message from redux logger is "redux-persist: persist timed out for persist key "root". I really don't know what I'm doing wrong.

Any help would be highly appreciated.

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";

import { store, persistor } from "./redux/store";

import "./index.css";
import "tachyons";
import App from "./containers/App";

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")

redux store

import { createStore, applyMiddleware } from "redux";
import { persistStore } from "redux-persist";
import thunkMiddleware from "redux-thunk";
import { createLogger } from "redux-logger";
import rootReducer from "../redux/root-reducer";

const logger = createLogger();

const middlewares = [logger, thunkMiddleware];

export const store = createStore(rootReducer, applyMiddleware(...middlewares));
export const persistor = persistStore(store);

export default { store, persistor };

root-reducer

import { combineReducers } from "redux";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

import requestUsers from "./reducers";

const persistConfig = {
    key: "root",
    storage,
    whitelist: ["users"],
};

const rootReducer = combineReducers({
    users: requestUsers,
});

export default persistReducer(persistConfig, rootReducer);

UserCardList component

import React, { Fragment } from "react";
import UserCard from "./UserCard";

const UserCardList = ({ users }) => {
  return (
    <Fragment>
      <h1 className="f1"> Users </h1>
      {users.map((user) => {
        return (
          <UserCard
            key={user.login.uuid}
            image={user.picture.large}
            firstName={user.name.first}
            lastName={user.name.last}
            email={user.email}
            city={user.location.city}
            country={user.location.country}
          />
        );
      })}
    </Fragment>
  );
};

export default UserCardList;

Answer 1

I have created a sample project here by taking the code from your question and everything looks fine for me. And the store is getting created and users is coming as expected. There could be a possible error in the reducers which is not posted here. Please have a look at the sample project, hope it helps.