Как убрать эту ошибку? redux-persist не удалось создать хранилище синхронизации. возвращение к хранилищу Noop

Я добавил redux-persist, чтобы состояние сохранялось после обновления.

Но я продолжаю получать эту ошибку в терминале:

✓ Компилируется/публикуется за 599 мс (3066 модулей) redux-persist не удалось создать хранилище синхронизации. возвращение к хранилищу noop.

Мой файл магазина

import {
  configureStore,
  combineReducers,
  getDefaultMiddleware,
} from '@reduxjs/toolkit';
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // Defaults to localStorage for web
import postingsReducer from '@/redux/slices/postingsSlice';
import newPostingFormReducer from '@/redux/slices/newPostingSlice';
import userReducer from '@/redux/slices/userSlice';

const persistConfig = {
  key: 'root',
  storage,
  // Optionally, blacklist any reducers here
};

const rootReducer = combineReducers({
  postings: postingsReducer,
  newPosting: newPostingFormReducer,
  user: userReducer,
});

// Create a persisted reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: {
        // Ignore persistence-related actions
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export const persistor = persistStore(store);

И мои основные провайдеры.tsx

'use client';
import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { NextUIProvider } from '@nextui-org/react';
import { ThemeProvider as NextThemesProvider } from 'next-themes';
import { store, persistor } from '@/redux/store';

// TODO add full layout skeleon
export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <Provider store = {store}>
      <PersistGate
        loading = {<div>Providers Loading...</div>}
        persistor = {persistor}
      >
        <NextUIProvider>
          <NextThemesProvider
            attribute = "class"
            defaultTheme = "bounty"
            themes = {['bitcoin', 'amce', 'bounty']}
          >
            {children}
          </NextThemesProvider>
        </NextUIProvider>
      </PersistGate>
    </Provider>
  );
}

Единственный большой вопрос, который я нашел по этой теме, был Как решить: console.error: «redux-persist не удалось создать хранилище синхронизации. Возврат к хранилищу «noop»

Однако я создаю не приложение React Native, а просто веб-приложение с NextJS 14.

🤔 А знаете ли вы, что...
Синтаксис JavaScript схож с синтаксисом языка программирования Java, но они не связаны.


203
2

Ответы:

Решено

Напишите "use client" вверху магазина.

'use client'

import {
  configureStore,
  combineReducers,
  getDefaultMiddleware,
} from '@reduxjs/toolkit';
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist';

В Next.js по умолчанию используется SSR (серверный рендеринг).
localStorage работает только в клиентских компонентах.
Чтобы использовать его, добавьте директиву «use client» вверху файла.

нравиться:

"use client"

import {
  configureStore,
  combineReducers,
  getDefaultMiddleware,
} from '@reduxjs/toolkit';