redux 在下一个js项目中持久化persist:root没有创建localstorage [英] redux persist in the next js project persist:root is not creating localstorage

问题描述

使用 nextjs 框架，redux-persist 不会创建本地存储值.登录后，persist:root 没有显示在本地

using the nextjs framework the redux-persist is not creating the local storage values. After login the persist:root is not showing in the local

在reactjs框架中，我尝试了redux持久化在本地存储中创建的persist:root，但在nextjs框架中使用相同的方法，我遵循的错误没有出现，但persist:root没有显示
在本地存储

In the reactjs framework, I have tried the redux persist the persist:root created in the local storage but in the nextjs framework the same method I am following the errors not coming but the persist:root is not showing
in the local storage

//store.js

//store.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';
import { persistReducer } from 'redux-persist';
import nextConnectRedux from 'next-connect-redux';
import storage from 'redux-persist/lib/storage/session';

const persistConfig = {
    key: "root",
    storage: storage,
}
const persistedReducer = persistReducer(persistConfig, reducers)

const middleware = [thunk];

const composeEnhancers =
  typeof window !== 'undefined' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    }) : compose;

const enhancer = composeEnhancers(
        applyMiddleware(...middleware),
    );

const store = () => {
    return createStore(
    persistedReducer,
    {},
    enhancer
)};

const nextConnect = nextConnectRedux(store)

export default nextConnect; 

//index.js

// index.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore } from 'redux-persist';
import nextConnect from '../store';
import Route from '../routes';
import { BrowserRouter } from "react-router-dom";

class App extends Component {
  render () {
    const persistor = persistStore(nextConnect);
    return (
        <Provider store={nextConnect}>
        <PersistGate loading={null} persistor={persistor}>
          <BrowserRouter>
           <Route/>
          </BrowserRouter>
        </PersistGate>
        </Provider>
    )
  }
}

export default App;

我希望显示本地存储中的persist:root

I want the persist:root in the local storage to be showed

推荐答案

如果你在服务器上渲染 React，你不能在默认配置中使用 redux-persist当您在默认配置下使用 redux-persist 时，意味着您将数据存储在浏览器存储中，而服务器上没有浏览器下面的实现展示了如何将 Redux Persist 集成到 Next.js

if you are rendering React on the server, you cant use redux-persist with default configs When you are using redux-persist with the default configuration, means you are storing your data on browser storage and you don’t have a browser on the server The following implementation shows you how to integrate Redux Persist into Next.js

rootReducer.js

store.js

_app.js

就这样

资源Redux Persist with Next.js

这篇关于redux 在下一个js项目中持久化persist:root没有创建localstorage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！