Я добавил 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, но они не связаны.
Напишите "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';