如何使用redux-persist v5？

Question

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

store.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

index.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吗？或者我可以在哪里找到更多的文档或示例？非常感谢!

Answer 1

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

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

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

这可能有助于解决这个问题，如果不能，请留言

Answer 2

我知道原因。在v5.2.0中，需要加载。如下所示：

render() {
  return (
    <PersistGate 
      persistor={persistor} 
      loading={<Loading />}
      >
    <PersistGate persistor={persistor}>
      {/* rest of app */}
    </PersistGate>
  )
}

在v5.2.2中现在是可选的