Реагируйте с помощью redux-persist, когда навигация по пользовательскому интерфейсу застревает

Когда я перемещаюсь по приложению, пользовательский интерфейс застревает, хотя URL-адрес меняется.

Я хотел бы интегрировать 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();

Надеюсь, я ясно выразился!


person thodwris    schedule 05.12.2018    source источник
comment
Вы пытались обернуть маршрутизатор в persist?   -  person Colin Ricardo    schedule 06.12.2018
comment
@Колин, спасибо за помощь! Ты прав. Мне пришлось обернуть маршрутизатор в persist..   -  person thodwris    schedule 06.12.2018
comment
Прохладный! Добавлю как ответ :)   -  person Colin Ricardo    schedule 06.12.2018


Ответы (1)


Попробуйте обернуть Router PersistGate. Порядок этих компонентов более высокого порядка имеет значение для React Router. Как у вас сейчас, когда вы меняете URL-адрес, он не вызывает повторную визуализацию, поэтому изменение порядка должно решить проблему.

person Colin Ricardo    schedule 05.12.2018