React路由器使用redux-持久化

Question

在更新了我的from项目中的大多数包之后，我再也找不出是什么改变了使redux持久化在使用连接- react路由器(从react redux-路由器更新，现在不再推荐)。

我尝试过在线查看指南，但似乎没有一个将redux-persist与connected-react-router集成在一起。如何使用这样的设置来使用新的connected-react-router？

包版本：

├── connected-react-router@6.6.0 
├── react@16.12.0 
├── react-redux@6.0.1 
└── redux-persist@6.0.0 

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import { PersistGate } from 'redux-persist/integration/react'
import createHistory from 'history/createBrowserHistory'
import { ConnectedRouter } from 'connected-react-router'
import { Provider } from 'react-redux'
import configureStore from './store'

const history = createHistory();
const store = configureStore(history);

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

src/store.js

import { applyMiddleware, createStore, compose } from 'redux'
import { createFilter   } from 'redux-persist-transform-filter';
import { persistReducer, persistStore } from 'redux-persist'
import { routerMiddleware } from 'connected-react-router'
import thunk from "redux-thunk";
import storage from 'redux-persist/lib/storage'
import apiMiddleware from './middleware';
import rootReducer from './reducers'
import createRootReducer from './reducers'


export default (history) => {
    const persistedFilter = createFilter(
        'auth', ['access', 'refresh']
    );

    const reducer = persistReducer(
        {
            key: 'root',
            storage: storage,
            whitelist: ['auth', 'user', 'game'],
            transforms: [ persistedFilter]
        },
        rootReducer
    );

    const store = createStore(
        createRootReducer(history), {},
        compose(
            applyMiddleware(thunk, apiMiddleware, routerMiddleware(history)),
            window.devToolsExtension ? window.devToolsExtension() : f => f,
        ),
    );
    persistStore(store);
    return store;
}

src/reducers/index.js

import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'
import auth, * as fromAuth from './auth'
import { reducer as form  } from 'redux-form';

const createRootReducer = (history) => combineReducers({
    router: connectRouter(history),
    auth: auth,
    // other reducer stuff
});
export default createRootReducer

Answer 1

有一件事要检查，它可能与PersistGate有关

在您的src/index.js中，您正在导入PersistGate，但不使用它。

import { PersistGate } from 'redux-persist/integration/react'

尝试用PersistGate包装根组件来使用它。就像这样。

<Provider store={store}>
  <PersistGate loading={null} persistor={persistor}>
    <ConnectedRouter history={history}>
      <App/>
    </ConnectedRouter>
  </PersistGate>
</Provider>

要做到这一点，您需要访问persistor，这是在调用persistStore(store)时需要定义的内容。也就是说，需要对您的src/store.js进行一些小的重构。

有关这一点的更多信息可以在保留-持久化文档中找到。上面写着..。

如果使用react，请用PersistGate包装根组件。这将延迟应用程序UI的呈现，直到您的持久化状态被检索并保存到redux。