从本地存储中删除存储时加载初始存储redux-persist答案

【问题标题】：Initial store is loaded when store is deleted from local storage redux-persist从本地存储中删除存储时加载初始存储redux-persist
【发布时间】：2020-05-27 19:08:56
【问题描述】：

我正在将 Next.js(SSr) 与 redux 一起使用。我已经用 nextjs 成功实现了 react-persist。

用户状态在登录后更新，值在 redux 存储中更新，同时在 localStorage 的存储中更新，但每当我删除包含存储的 localStorage 项目并刷新页面时，localStorage 由第一个版本填充store 即初始存储。我虽然在补水方面可能存在问题，但我认为 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 项目并刷新页面后加载初始存储而不是更新存储

【问题讨论】：

标签： javascript reactjs redux next.js redux-persist

【解决方案1】：

如果您使用 redux-persist，则无需将 PersistGate 与提供程序绑定...您可以将其删除并重试，希望它能解决您的问题...这是因为您已经使用 withRedux 包装了组件钩子。

return (
      <PersistGate
        loading={<Component {...pageProps} />}
        persistor={this.persistor}
      >
          <Layout>
            <Component router={router} {...pageProps} />
          </Layout>
      </PersistGate>
  )

这就够了

【讨论】：