Всякий раз, когда я оборачиваю свое приложение с помощью PersistGate, он выдает мне «TypeError: users.map не является функцией» в одном компоненте, в противном случае он работает нормально

Question

Как сказано в заголовке, я отображаю массив, который у меня есть из api в компоненте UserCardList, и он работает нормально, но как только я оборачиваю приложение с помощью PersistGate, он дает мне «TypeError: users.map не является функцией» и сообщение об ошибке от регистратора redux: «redux-persist: persist timed out for persist key« root ». Я действительно не знаю, что делаю неправильно.

Любая помощь будет очень признательна.

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 -редуктор

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

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

const UserCardList = ({ users }) => {
  return (
    <Fragment>
      <h1 className="f1"> IOTA 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

Я создал образец проекта здесь , взяв код из вашего вопроса, и все выглядит нормально. И магазин создается, и users прибывает, как ожидалось. Возможна ошибка в reducers, которая здесь не размещена. Взгляните на образец проекта, надеюсь, он поможет.

Answer 2

Я вижу, что в магазине redux у вас есть это:

export const store = createStore(rootReducer, applyMiddleware(...middlewares));
export const persistor = persistStore(store);
// you dont need line below, you exported store and persistore in lines above
export default { store, persistor };