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

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

0 голосов
/ 06 декабря 2018

Когда я перемещаюсь по приложению, пользовательский интерфейс застревает, хотя 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();

Надеюсь, я ясно дал понять!

1 Ответ

0 голосов
/ 06 декабря 2018

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

...