导航 UI 卡住时使用 redux-persist 做出反应答案

【问题标题】：React with redux-persist when navigate the UI is stuck导航 UI 卡住时使用 redux-persist 做出反应
【发布时间】：2018-12-05 22:45:29
【问题描述】：

当我在应用程序中导航时，尽管 url 发生了变化，但 UI 却卡住了。

我想将 redux-persist 集成到我当前的应用程序中，但它最终使我遇到了一个奇怪的错误。

注意：我还使用 redux-saga 作为中间件来创建商店。

store.js

import { createStore, applyMiddleware, compose } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native

import createSagaMiddleware from 'redux-saga'
import rootReducer from "../reducers/index";
import rootSaga from '../sagas/index'

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

const persistedReducer = persistReducer(persistConfig, rootReducer)

const sagaMiddleware = createSagaMiddleware()

const middleware = applyMiddleware(sagaMiddleware)

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(
  persistedReducer,
  {},
  composeEnhancers(middleware)
)

export const persistor = persistStore(store)

sagaMiddleware.run(rootSaga)

export default store

window.store = store

当我在 Persist Gate 组件中发表评论时，导航会按预期工作。

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from 'react-redux'
import registerServiceWorker from "./js/registerServiceWorker";
import { PersistGate } from 'redux-persist/integration/react'
import store, { persistor } from './js/store';

ReactDOM.render(
  <Router>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </Router >,
  document.getElementById("root")
);
registerServiceWorker();

我希望我说清楚了！

【问题讨论】：

你试过用persist包裹路由器吗？
@Colin 谢谢你的帮助！你说的对。我不得不将路由器包裹起来坚持..
酷！我会添加它作为答案:)

标签： reactjs react-native redux redux-saga redux-persist

【解决方案1】：

尝试用PersistGate 包裹您的Router。这些高阶组件的顺序对 React Router 很重要。您现在拥有它的方式，当您更改 url 时，它不会触发重新渲染，因此交换顺序应该可以解决问题。

【讨论】：