在 Next.js 中使用 redux-persist 时元标记出现问题

Question

在 Next.js 中使用 redux-persist 时元标记出现问题

Ame*_*eiz 2 reactjs react-redux next.js redux-persist redux-toolkit

我正在使用 Next.js 和 redux 构建一个电子商务应用程序。我注意到，当我将 redux-persist 添加到应用程序时，所有元标记都停止工作。我在下面添加了我的代码片段

import { combineReducers } from 'redux'
import { configureStore } from '@reduxjs/toolkit'
import shopReducer from './reducers/shop/shopSlice'
import storage from 'redux-persist/lib/storage'
import { persistStore,persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist'

const initState = {}

const persistConfig = {
   key: 'root',
   version: 1,
   storage,
   whitelist: ['shop'],
}

const rootReducer = combineReducers({
   shop: shopReducer,
})

const persistedReducer = persistReducer(persistConfig, rootReducer)

const reduxStore = () => {
   const store = configureStore ({
       initState,
       reducer: persistedReducer,
       middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware({
          serializableCheck: {
             ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
          },
       }),
   })

   const persistor = persistStore(store)
   return { persistor, store }
}

export default reduxStore

Run Code Online (Sandbox Code Playgroud)

然后在_app.js

import Layout from '../components/Layout'
import { Provider } from 'react-redux'
import reduxStore from '../context/store'
import { PersistGate } from 'redux-persist/integration/react'

const { persistor, store } = reduxStore()

function MyApp({ Component, pageProps }){
    return (
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <Layout>
                    <Component {...pageProps} />
                </Layout>
            </PersistGate>
        </Provider>
    )
}

export default MyApp

Run Code Online (Sandbox Code Playgroud)

该meta tags组件是这样的，不包括其他标签。

import Head from 'next/head'

function Meta({ title, keywords, description, image, appName, url }){
    return (
        <Head>
            <meta name="theme-color" content="#0066b2" />
            <meta name="description" content={description} />
            <meta name="keywords" content={keywords} />
            <meta name="author" content="author" />
            <meta name="twitter:card" content="summary_large_image" />
            <meta name="twitter:title" content={title} />
            <meta name="twitter:description" content={description} />
            <meta property="twitter:image" content={image} />
            <meta property="twitter:image:alt" content={appName} />
            <meta name="msapplication-TileColor" content="#ffffff" />
            <title>{title}</title>
        </Head>
    )
}

Meta.defaultProps = {
    appName: 'Store',
    url: 'https://example.com',
    title: 'Store Example',
    keywords: 'ecommerce',
    description: 'Store',
    image: '/storefront.png',
}

export default Meta

Run Code Online (Sandbox Code Playgroud)

我如何解决这个问题，因为我想同时使用 - redux-persist 来保存访客购物车和用于 SEO 的元标记？

谢谢

Answer 1

Ame*_*eiz 9

我在这个Github 链接上找到了解决方案。显然存在redux-persist禁用 SSR 的问题，这基本上就是使用 redux-persist 时元标记不起作用的原因。

解决办法是修改下面的代码

<PersistGate persistor={persistor} loading={null}>
    <Layout>
        <Component {...pageProps} />
    </Layout>
</PersistGate>

Run Code Online (Sandbox Code Playgroud)

对此

<PersistGate persistor={persistor} loading={null}>
    {() => (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    )}
</PersistGate>

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，4 月前
查看次数：	2477 次
最近记录：	2 年，7 月前