Redux-persist 在 React / connected-react-router 中的实现

Question

我对 connected-react-router 实施了 redux-persist。起初，一切似乎都正常。 Redux store 连接到本地存储并且它持久化状态。但我意识到，当我从我的电子邮件中打开 link (http://localhost:9080/reset?token=###) 以重置密码时，该网站只是停留在当前位置。当我尝试手动更改 url 时，它不起作用。

link有效。当我在其他浏览器中打开 link 时，它起作用了。 Url 无需设置 redux-persist 即可手动更改。

store.js

import { applyMiddleware, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import { composeWithDevTools } from 'redux-devtools-extension';
import { routerMiddleware, connectRouter } from 'connected-react-router';
import createBrowserHistory from 'history/createBrowserHistory';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import rootReducer from './src/reducers';

export const history = createBrowserHistory();
const middlewares = [
  routerMiddleware(history), 
  thunkMiddleware,
  createLogger({
    predicate: () => process.env.NODE_ENV === 'development',
    collapsed: true,
  }),
];
const enhancers = [applyMiddleware(...middlewares)];
const persistConfig = {
  key: 'root',
  storage,
};
const persistedReducer = persistReducer(
  persistConfig,
  rootReducer(history), 
);

export default preloadedState => {
  const store = createStore(
    persistedReducer,
    preloadedState,
    composeWithDevTools(...enhancers),
  );
  const persistor = persistStore(store);

  return { store, persistor };
};

index.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter as Router } from 'connected-react-router';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { PersistGate } from 'redux-persist/lib/integration/react';
import configureStore, { history } from './store';
import Routes from './routes';
import Loading from './src/shared/loading';

const theme = createMuiTheme({
 ...
});
const { store, persistor } = configureStore();
const root = document.createElement('div');
document.body.appendChild(root);

render(
  <Provider store={store}>
    <PersistGate loading={<Loading />} persistor={persistor}>
      <MuiThemeProvider theme={theme}>
        <Router history={history}>
          <Routes />
        </Router>
      </MuiThemeProvider>
    </PersistGate>
  </Provider>,
  root,
);

我试过的。

而且我尝试添加 'connectRouter' 如下所示。它似乎没有改变任何东西。我应该在商店中设置 'connectRouter' 吗？

const store = createStore(
  // persistedReducer,
  connectRouter(history)(persistedReducer),
  composeWithDevTools(enhancers),
);

当我使用 'rootReducer' 而不是 'rootReducer(history)' 时，因为历史将被 'connectRouter(history)(persistedReducer)' 复制。它将中断并显示一条错误消息：无法读取属性 'location' of undefined.

"connected-react-router": "^6.4.0"
"redux-persist": "^5.10.0"
"react": "^16.8.6"
"react-dom": "^16.8.6"
"redux": "^4.0.0"

谢谢！！

Answer 1

使用黑名单不持久化或白名单持久化!!

const persistConfig = { 键：'root'，贮存，黑名单：['router'], };

Redux-persist 在 React / connected-react-router 中的实现

Redux-persist Implementation in React / connected-react-router

redux-persist

connected-react-router

store.js

index.js

我试过的。