Исходное хранилище загружается при удалении хранилища из локального хранилища.

Question

Я использую Next. js (SSr) с редукцией. Я успешно выполнил «реакцию-упорство» со следующим js.

состояние пользователя обновляется после входа в систему, а значение обновляется в хранилище приставок и одновременно в хранилище localStorage, но всякий раз, когда я удаляю элемент localStorage, содержащий хранилище, и обновляю sh страницу, заполняется localStorage первой версией магазина, т.е. начальным магазином. Я думаю, что могут быть проблемы с регидратацией, но я думаю, что PersistGate справляется с этим эффективно. Может кто-то указать, что пошло не так в реализации? заранее спасибо:)

_app. js

import withRedux from 'next-redux-wrapper'
import { withRouter } from 'next/router'
import { Provider } from 'react-redux'
import App from 'next/app'
import Layout from 'components/Layout'
import createStore from 'store/createStore'


import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'

class MyApp extends App {
 static async getInitialProps ({ Component, ctx }) {
   return {
     pageProps: Component.getInitialProps
     ? await Component.getInitialProps(ctx)
     : {}
   }
 }

constructor(props) {
 super(props)
 this.persistor = persistStore(props.store)
}

render () {
 const { Component, pageProps, store, router } = this.props
 return (
  <>
   <Provider store={store}>
      <PersistGate
        loading={<Component {...pageProps} />}
        persistor={this.persistor}
      >
          <Layout>
            <Component router={router} {...pageProps} />
          </Layout>
      </PersistGate>
    </Provider>
  </>
  )
 }
}

export default withRedux(createStore, {debug: true})(
 withRouter(MyApp)
)

createStore. js

import Immutable from 'immutable'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import { composeWithDevTools } from 'redux-devtools-extension'
import { createStore, applyMiddleware } from 'redux'

import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

import config from 'config'
import rootReducer from '../reducers'

const persistConfig = {
 key: 'primary',
 storage,
 whitelist: ['user'],
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

function createMiddlewares ({ isServer }) {
 const middlewares = [
  thunkMiddleware
 ]

if (config.env === 'development' && typeof window !== 'undefined') {
 middlewares.push(createLogger({
   level: 'info',
   collapsed: true,
   stateTransformer: (state) => {
     const newState = {}

     for (const i of Object.keys(state)) {
       if (Immutable.Iterable.isIterable(state[i])) {
         newState[i] = state[i].toJS()
       } else {
         newState[i] = state[i]
       }
     }

     return newState
   }
 }))
 }

return middlewares
}

function immutableChildren (obj) {
 const state = {}
 Object.keys(obj).forEach((key) => {
  state[key] = Immutable.fromJS(obj[key])
 })
 return state
}

export default (initialState = {}, context) => {
 const { isServer } = context
 const middlewares = createMiddlewares({ isServer })
 const state = immutableChildren(initialState)

 return createStore(
    persistedReducer,
    state,
    composeWithDevTools(applyMiddleware(...middlewares))
   )
 }

Img: начальное хранилище загружено вместо обновленного хранилища после удаления элемента localStorage и обновления страницы