3

我开始学习 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.这是我的代码：

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

4

2 回答 2

4

如果添加加载状态<Loading />（这是您的组件，如微调器或 greeking 组件，它定义了应用程序从存储加载数据时的外观）PersistGate仍然无法正常工作。

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

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

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

于 2017-11-15T00:46:52.927 回答
0

我知道原因。在 v5.2.0 中需要加载。像这样：

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

现在在 v5.2.2 中是可选的

于 2017-11-02T02:20:46.073 回答