reactjs - 如何使用 redux-persist v5？

开始学习redux，尝试使用redux-persist来存储数据。由于 redux-persist 现在更新到 v5 并推荐使用 PersistGate。但是我几乎找不到关于 PersistGate 的文档。我写了一些代码，但发生了这个错误 PersistGate(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. 这是我的代码:

商店.js

import thunk from 'redux-thunk'
import { createLogger } from 'redux-logger'
import { createStore, applyMiddleware, compose } from 'redux'
import { persistStore, persistCombineReducers } from 'redux-persist'
import storage from 'redux-persist/es/storage'
import reducer from '../reducers'

const loggerMiddleware = createLogger()

const middleware = [thunk, loggerMiddleware]

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const configureStore = composeEnhancers(
  applyMiddleware(...middleware),
)(createStore)

const config = {
  key: 'root',
  storage,
}

const combinedReducer = persistCombineReducers(config, reducer)

const createAppStore = () => {
  let store = configureStore(combinedReducer)
  let persistor = persistStore(store)

  return { persistor, store }
}

export default createAppStore

索引.js

import React from 'react'
import ReactDOM from 'react-dom'
import './assets/css/index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'
import { Provider } from 'react-redux'
import createAppStore from './store'
import { PersistGate } from 'redux-persist/es/integration/react'

const { persistor, store } = createAppStore()

ReactDOM.render(
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root'))
registerServiceWorker()

编译器在 render() 中抛出错误。错误信息如上。
你能告诉我如何正确使用 PersistGate 吗？或者在哪里可以找到更多文档或示例？非常感谢你!

最佳答案

如果在 <Loading /> 中添加加载状态 PersistGate(这是你的组件，如微调器或希腊组件，它定义了从存储加载数据时应用程序的外观)仍然不起作用。

请确认您的 reducer import reducer from '../reducers' ，应该是原始的reducer(javascript对象)，不要应用combineReducers(redux)，如果你已经应用了它，那么在你的store.js中，你应该使用persistReducer而不是persistCombineReducers，如下所示

import { persistReducer } from 'redux-persist'
...
...
const combinedReducer = persistReducer(config, reducer)
...
...

可能会帮助解决问题，如果没有，请留言

关于reactjs - 如何使用 redux-persist v5？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47050539/