使用 localstorage Redux + Next.js 加载初始状态

Question

我试图从本地存储加载初始状态来创建商店，但出现此错误：ReferenceError: localStorage is not defined

我的商店：

const store = createStore(reducer, {
    userInfo: {
        isLogged: false,
        items: localStorage.getItem("@items") || []
    }
})

Answer 1

本地存储没有在 next js 中定义，因为它在服务器端渲染以实现 Redux，使用 Next js 的样板。

Redux 持久化示例

此示例展示了如何在 Next.js 中将 Redux 与 Redux Persist 的强大功能集成。

使用 redux 为您的应用程序提供全局状态的优势。您还需要一些状态值可离线使用。redux-persist 使用它可以将状态保存在浏览器的本地存储中。虽然有多种方法可以保留您的状态，但您始终可以在文档中找到这些方法。这是一个示例，说明如何将 redux-persist 与 redux 以及 Next.js 的通用渲染方法集成。