redux-persist无法创建同步存储,正在回退到noop存储,- Next.js

j2qf4p5b 于 11个月前发布在其他

关注(0)|答案(1)|浏览(131)

所以，我使用Nextjs 13.4版本，我创建了一个Redux js，我还使用了redux-persist包来存储数据，下面是我的简单代码：
index.ts:

import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
import thunk from "redux-thunk";
import storage from "redux-persist/lib/storage";
import { persistReducer } from "redux-persist";
import cart from "./cartSlice";

const reducers = combineReducers({ cart });

const config = {
  key: "root",
  storage,
};

const reducer = persistReducer(config, reducers);

const store = configureStore({
  reducer: reducer,
  devTools: process.env.NODE_ENV !== "production",
  middleware: [thunk],
});

export default store;

字符串
cartSlice.ts:

import { createSlice } from "@reduxjs/toolkit";
export const cartSlice = createSlice({
  name: "cart",
  initialState: [],
  reducers: {},
});
//  export const {} = cartSlice.actions;
export default cartSlice.reducer;

型
layout.tsx:

import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Provider } from "react-redux";
import store from "@/store";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";
let persistore = persistStore(store);
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistore}>
            {children}
          </PersistGate>
        </Provider>
      </body>
    </html>
  );
}

型
做了这件事之后，

redux-persist failed to create sync storage. falling back to noop storage.

型
我也得到这个错误：x1c 0d1x不知道为什么我看到这个错误，请给予我修改后的代码.

redux

来源：https://stackoverflow.com/questions/76884505/redux-persist-failed-to-create-sync-storage-falling-back-to-noop-storage-nex

1条答案

按热度按时间

vhmi4jdf1#

store.js

import { configureStore } from "@reduxjs/toolkit";
import cartReducer from "@/redux/cartSlice";
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";
import createWebStorage from "redux-persist/es/storage/createWebStorage";

export function createPersistStore() {
  const isServer = typeof window === "undefined";
  if (isServer) {
    return {
      getItem() {
        return Promise.resolve(null);
      },
      setItem() {
        return Promise.resolve();
      },
      removeItem() {
        return Promise.resolve();
      },
    };
  }
  return createWebStorage("local");
}
const storage = typeof window !== "undefined"
    ? createWebStorage("local")
    : createPersistStore();
const persistConfig = {
  key: "root",
  version: 1,
  storage,
};

const persistedReducer = persistReducer(persistConfig, cartReducer);

export const store = configureStore({
  reducer: { cart: persistedReducer },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});
export let persistor = persistStore(store);

字符串
单独的Providers组件来 Package 我的布局

"use client";
import { persistor, store } from "@/redux/store";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";

const Providers = ({ children }) => {
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>{children}</PersistGate>
    </Provider>
  );
};

export default Providers;

型
cartSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  products: [],
};

export const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addToCart: (state, action) => {
      const existingProduct = state.products.find(
        (item) => item.id === action.payload.id);
  },
});

export const {
  addToCart,
  increseQuantity,
  descreaseQuantity,
  removeFromCart,
  resetCart,
} = cartSlice.actions;
export const cartState = (state) => state.cart;
export default cartSlice.reducer;

型
最后我的layout.js

import Footer from "./components/Footer";
import Navbar from "./components/Navbar";
import Providers from "./components/Providers";
import "./css/globals.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="font-bodyFont">
        <Providers>
          <Navbar />
          {children}
          <Footer />
        </Providers>
      </body>
    </html>
  );
}

型
我的坚持工作得很好，我希望你能发现它有帮助。

赞(0）回复(0）举报 11个月前

我来回答

redux-persist无法创建同步存储,正在回退到noop存储,- Next.js

1条答案

相关问题

热门标签

最新问答