如何解决 redux-persist 创建同步存储失败。回退到 React.js 中的 noop 存储

Posted 2023-02-22

【中文标题】如何解决 redux-persist 创建同步存储失败。回退到 React.js 中的 noop 存储

【英文标题】：How to solve redux-persist failed to create sync storage. falling back to noop storage in React.js

【发布时间】：2020-12-13 12:35:32

【问题描述】：

我的 React 应用程序在客户端渲染中运行良好。我正在尝试在我的应用程序中实现服务器端渲染以用于 SEO。

当我运行 server.js 文件时出现错误。

我该如何解决这个问题？ Server.js

    import path from 'path';
import fs from 'fs';

const PORT = 8080;
const app = express();

const router = express.Router();
app.use(express.json());

const serverRenderer = (req, res, next) => 
    const content = ReactDOMServer.renderToString(
<Provider store=store>
<PresistGate presist=presist>
        <StaticRouter location=req.url context=>
            <App />
        </StaticRouter>
</PresistGate >
</Provider>
    );
    fs.readFile(path.resolve('../dist/index.html'), 'utf8', (err, data) => 
        if (err) 
            console.error(err);
            return res.status(500).send('An error occurred');
        
        return res.send(data.replace('<div id="root"></div>', `<div id="root">$content</div>`));
    );
;
router.use('*', serverRenderer);

router.use(express.static(path.resolve(__dirname, '..', 'dist'),  maxAge: '30d' ));

// tell the app to use the above rules
app.use(router);

// app.use(express.static('./build'))
app.listen(PORT, () => 
    console.log(`s-s-r running on port $PORT`);
);

【参考方案1】：

我可能会很晚才回答，但是，

在 NextJs 的情况下，问题是通过有条件地使用存储来解决的，它是 client side 或 server side 用于持久化状态。 至于事实上'window is not defined on server side'.

示例代码：

const isClient = typeof window !== "undefined";

let mainReducer;
if (isClient) 
 const  persistReducer  = require("redux-persist");
 const storage = require("redux-persist/lib/storage").default;

 const rootPersistConfig = 
   key: "root",
   storage: storage,
   blacklist: ["countries"],
 ;

 const countriesPersistConfig = 
   key: "countries",
   storage: storage,
   whitelist: ["countriesList"],
 ;

 /* COMBINE REDUCERS */
 const combinedReducers = combineReducers(
   countries: persistReducer(countriesPersistConfig, countries),
 );

 mainReducer = persistReducer(rootPersistConfig, combinedReducers);
 else 
 mainReducer = combineReducers(
   countries,
 );

如果仍然不能解决问题。尝试阅读此线程 - using-redux-with-redux-persist-with-server-side-rendering

谢谢。