React Redux 坚持

Question

我刚开始使用 Redux Persist，但出于某种原因我无法使用它。（无法读取属性 'subscribe' 的未定义错误）

Persistor.js

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import store from 'redux-persist/es/storage/session' // defaults to 
localStorage for web and AsyncStorage for react-native

import rootReducer from './reducers'

const persistConfig = {
    key: 'root',
    storage: store,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export default () => {
   let store = createStore(persistedReducer)
   let persistor = persistStore(store)
   return { store: store, persistor: persistor }
}

index.js

import React from 'react';
import App from './components/App/App';
// import registerServiceWorker from './registerServiceWorker';
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import persistor from './Persistor'
import rootReducer from './reducers'
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

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

使用普通的 Redux 可以正常工作。但是当我尝试切换 Persist Redux 时，我得到了上面写的错误。

Answer 1

您在索引中导入的持久值不是对象。 returns 包含存储和持久性的对象是一个函数。

实例化 persistor 函数，然后将分配给存储在 Provider 中的值与 persistgate 中的 persistor 交换。

将您的导入重命名为类似 configureStore 的名称以防止任何冲突。

const { store, persistor } = configureStore()

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

React Redux 坚持

React Redux Persist

javascript

reactjs

redux

middleware

redux-persist